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}

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

jsfddle here

Answer 1

通过更改宽度或高度 - 显然通过更改两者 - ，您可以完全重新定义画布，因此实际上画布内容被清除是完全合乎逻辑的：它应该如何更改？
它应该扩展吗？，重用现有像素值，但如何？居中，... ??

这甚至是一个＆＃39;诀窍＆＃39;在某个时候：要清除画布，只需要执行canvas.width = 0然后执行canvas.width = oldWidth，这样就可以清除。由于clearRect或fillRect现在比这个技巧更快，因此没有理由再使用它。

因此，当您的画布调整大小时，它将被清除。在发生此类调整大小时，您可以决定所需的策略：是缩放旧画布并将其复制到新画布上，还是以相同的比例居中，或者是最多/最左侧的副本??
你决定。

如果你有一个＆＃39;场景图＆＃39;，这意味着：如果你能够重绘画布的每个对象，那就没有真正的问题了。
如果你不这样做，你必须做一些努力才能在新画布上获得旧内容像（未经测试）的东西：

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...
}

调整内容在调整大小时消失

1 个答案: