캔버스 내용의 크기를 바꾸면

Question

아마도 나는 근본적인 것이 빠져 있습니다.

저는 캔버스에 물체를 채울 것입니다. 사용자가 입력 할 때 캔버스의 크기를 조정해야합니다 (따라서 콘텐츠 크기 조정).

JS (단순)

var c = document.getElementById('c'); 
var cc = c.getContext('2d'); 
cc.beginPath();   
cc.rect(20, 20, 20, 12); 
cc.fill(); 

function resizeCanvas(size){ 
    var c = document.getElementById('c'); 
    var cc = c.getContext('2d'); 
    // This will make the content disappear 
    c.width = c.style.width = c.height = c.style.height = size; 
} 

HTML

<canvas id="c" width="200" height="200"></canvas> 
<br/> 
<button onclick='resizeCanvas(100);return false;'>Resize</button> 

CSS

canvas {border: 1px solid black} 

캔버스 리사이즈 않고 콘텐츠가 비게된다. 어떤 생각? 어떻게 변경해야합니다 : 실제로는 캔버스 내용이 삭제되는 것을 매우 논리적이다, 그래서 both- 변경하여 분명 하나 너비 또는 높이 - 그리고을 변경하여

jsfddle here

Answer 1

, 당신은 완전히 캔버스를 재정의?
크기를 조정해야합니까? , 기존 픽셀 값을 재사용하지만 어떻게? 가운데에, ... ??

캔버스를 지우려면 canvas.width = 0을 누른 다음 canvas.width = oldWidth를 수행하면 문제가 해결됩니다. clearRect 또는 fillRect가이 트릭보다 더 빠르기 때문에 더 이상 사용할 이유가 없습니다.

그래서 캔버스 크기를 조정하면 지워집니다. 크기 조정이 필요할 때 원하는 정책을 결정하는 것은 사용자의 몫입니다. 예전 캔버스의 크기를 조정하여 새 캔버스에 복사하거나 동일한 배율로 중앙에 복사하거나 위쪽/왼쪽으로 가장 많이 복사 하시겠습니까 ??
을 결정하십시오.

'장면 그래프'가있는 경우 : 캔버스의 모든 개체를 다시 그릴 수 있다면 실제 문제는 없습니다.
그렇지 않은 경우 새 캔버스에서 이전 내용을 가져 오려면 약간의 노력을 기울여야합니다.
무언가 (시험 안 함) :

function resizeCanvas(size){ 
    var c = document.getElementById('c'); 
    var canvasCopy = document.createElement('canvas'); 
    canvasCopy.width = c.width; canvasCopy.height = c.height; 
    canvasCopy.getContext('2d').drawImage(c, 0,0); // copy the 'old' canvas 
    // This will make the content disappear 
    c.width = c.style.width = c.height = c.style.height = size; 
    var cc = c.getContext('2d'); 
    cc.drawImage(canvasCopy, 0, 0) ; // or you might scale, or center, or... 
}