有没有办法在不清除上面绘制的内容的情况下动态扩展 html5 画布？答案

【问题标题】：Is there a way to dynamically extend the html5 canvas without clearing what's drawn on it?有没有办法在不清除上面绘制的内容的情况下动态扩展 html5 画布？
【发布时间】：2013-05-18 15:24:37
【问题描述】：

见this

当输出到达页面底部时，我希望画布自动扩展，以便它可以继续运行。我尝试设置 canvas.height 属性，但它清除了窗口。有没有办法做到这一点？

【问题讨论】：

<canvas> 元素被定义为在调整大小时被清除，因此您必须手动完成。

标签： html canvas autoresize

【解决方案1】：

我做什么：
创建与画布大小相同的虚拟画布。

dummyCanvas.getContext('2d').drawImage(yourCanvas, 0, 0);
newCanvas = recreate(yourCanvas);
newCanvas.getContext('2d').drawImage(dummyCanvas);

不是很漂亮，尤其是在您需要每秒重新创建画布 50 次以上的情况下...有兴趣查看其他答案...这对我有用，因为我只是在 clientWidth/clientHeight 时调整画布的大小更改 [window.onresize]

【讨论】：

好的，谢谢 - 我猜 canvas jsut 并不是为我想要做的事情而设计的

【解决方案2】：

我知道这已经有点老了，但是：

您不需要像 ItzWarty 解释的那样重新创建画布。你可以这样做：

<html>...
  <canvas id="canvas"></canvas>
  <canvas id="buffer" style="display:none;"></canvas>
  ...
</html>

那么这就是你的javascript：

var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
window.onresize = function(event) {
    var w = $(window).width(); //Using jQuery for easy multi browser support.
    var h = $(window).height();
    buffer.width = w;
    buffer.height = h;
    buffer.getContext('2d').drawImage(canvas, 0, 0);
    canvas.width = w;
    canvas.height = h;
    canvas.getContext('2d').drawImage(buffer, 0, 0);
}

在这里您只需更改画布的大小，然后复制图像。我不确定，但我相信性能会好一些，而且我认为它更简单、更容易理解。

【讨论】：