Question

请参阅this

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

Answer 1

我知道现在有点老了，但是：

您不需要像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);
}

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

Answer 2

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

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

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

有没有办法动态扩展html5画布而不清除它上面绘制的内容？

2 个答案: