Question

我在这里按照教程：http://hashrocket.com/blog/posts/using-tiled-and-canvas-to-render-game-screens在cavas上创建了Tiled地图。我对解决方案做了一些改进，但渲染的东西保持不变：

var self = this,
    layer = self._canvas.canvas.cloneNode( false );
    layer = layer.getContext( "2d" );

基本上，我在某处引用了canvas HTML，在这里我正在克隆它（就像在教程中一样）。接下来，我制作了一些逻辑并在该克隆上绘制了瓷砖：

layer.drawImage( ... );

最后，在整个绘图图块结束后，克隆将在主画布上绘制：

self._canvas.drawImage( layer.canvas, 0, 0 );

我的问题是为什么？当我做同样的算法不在图层上，而是主画布，渲染图像是相同的。它背后有一些逻辑吗？我想到的只有一点是，我们可以阻止将layer抓取错误提交到canvas。教程仅涉及we’ll set up a scratch canvas to render to for a slight performance improvement

Answer 1

你正在使用后台缓冲区。这可以防止浏览器在绘制时尝试将画布渲染到屏幕，除了潜在的性能提升还可以防止潜在的闪烁。（这主要适用于双缓冲，但这种方法非常相似）

About buffering and canvas

Answer 2

A）由于暂存层仅限内存，因此浏览器无需尝试更新每个监视器刷新的内容 - 它只绘制一次到主画布，然后整体更新。

B）如果你使用带偏移/剪切的drawImage（）和自身移动东西（这是典型的平铺时），浏览器不必创建临时位图，复制内容，然后复制回一个不同的位置，最后破坏临时位图。

为什么要克隆画布？需要解释教程

2 个答案: