调整大小时画布内容消失[重复]答案

【问题标题】：Canvas content disappering on resize [duplicate]调整大小时画布内容消失[重复]
【发布时间】：2014-06-27 07:45:44
【问题描述】：

我可能遗漏了一些基本的东西。

我正在用对象填充画布。在用户输入时，我需要调整画布大小（从而缩放内容）。

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}

画布已调整大小，但内容为空白。有什么想法吗？

jsfddle here

【问题讨论】：

标签： html canvas

【解决方案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...
}

【讨论】：