HTML 캔버스의 크기를 조정하면 내용이 공백입니다.

Question

사용자가 화면의 크기를 조정할 때 크기가 조정되는 HTML 캔버스 요소가 있습니다.

canvas.height = pageHeight(); 
canvas.width = pageWidth(); 

실제 크기 조정은 잘되지만 캔버스는 공백입니다.

나는 그 내용을 지키고 싶다. 캔버스 요소의 크기를 변경하는 또 다른 방법이 있습니까, 아니면 내용을 저장 한 다음 다시 캔버스로 그릴 수있는 방법이 있습니까?

Answer 1

캔버스를 CSS로 크기를 조정하거나 크기를 조정 한 후에 캔버스를 다시 그리기해야합니다. 당신이 그것을 캔버스의 내용을 저장하고 다시 그리기하려면

, 나는 몇 가지 옵션을 생각할 수 있습니다

1. 사용 context.getImageData 전체 캔버스를 잡아, 캔버스 크기를 조정 한 다음 다시 그리기 context.putImageData를 사용 새로운 규모로.
2. Image 개체를 만들고 소스를 canvas.toDataUrl()의 결과로 설정하고 캔버스의 크기를 조정 한 다음 새 배율로 이미지를 그립니다.
3. context.setScale(xscale, yscale)으로 전화하고 원래 캔버스를 그리는 데 사용한 기능을 호출하십시오. xscale 및 yscale을 올바르게 설정한다고 가정하면 자동으로 모든 항목이 새 크기로 조정됩니다.
4. 업데이트 된 크기로 새 캔버스를 만들고 context.drawImage(oldCanvas, ...)을 호출하여 이전 캔버스를 새 캔버스로 복사합니다. 그런 다음 새 캔버스로 이전 캔버스를 전환합니다.

언제든지 다른 도메인의 이미지를 캔버스에 그렸고 이전 구현에서 지원하지 않는 경우 처음 두 옵션이 작동하지 않습니다.

가능하다면 옵션 3 (새로운 눈금으로 이미지 다시 그리기)이 가장 좋습니다. 라인을 부드럽고 선명하게 유지할 수있는 유일한 옵션이며 이미지를 생성하는 데 필요한 모든 정보가 있다고 가정 할 때 항상 작동합니다.