有没有办法动态扩展HTML5的Canvas不清除是怎么画就可以了？

StackOverflow https://stackoverflow.com/questions/2405772

  •  18-09-2019
  •  | 
  •  

题

见此

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

有帮助吗？

解决方案

我做的：点击 创建具有相同大小的画布虚拟画布。 

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

不是很漂亮，尤其是在你的情况下它会要求你重新创建画布每秒50+次...有兴趣看到其他的答案......这对我的作品，因为我只是调整画布时，clientWidth / clientHeight变化[window.onresize]

其他提示

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

您无需重新创建画布ItzWarty explaines。你可以这样做：

<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);
}

下面只改变画布的大小，并且复制在图像上。我不知道，但我相信表现好一点，这是在我看来，更简单，更容易理解。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top