我尝试使用画布对象构建一个可滚动的图块地图，该对象会自动计算相对于屏幕分辨率的大小，并相对于（更大的）地图上的位置渲染图块。
我打算移动生成的图块，只绘制需要重新绘制的图块。
这意味着我滚动地图，在顶部绘制新图块（例如向上移动）并删除底部的最后一个图块，这些图块现在不在可见画布中。
我的问题是：
我认为改变画布中每个图块的位置对性能来说不是很好，我认为这可以使用getImageData()和putImageData()来解决，但仍然存在一个问题：
如果我只是移动这些图块并绘制新图块，它总是会“跳跃”30 像素（1 个图块 = 30x30），那么有没有一种简单/性能技术上好的方法来实现平滑的线性滚动效果？
【问题讨论】：
标签： javascript html performance canvas html5-canvas
只需使用drawImage 或图案填充木板凋零（后者需要您使用翻译将瓷砖放在正确的位置）。
drawImage 将新的目标大小作为参数，因此您也可以缩放图块。
这是我为其他问题所做的模式实现，但我假设您应该能够看到代码中发生了什么：
function fillPattern(img, w, h) {
//draw the tile once
ctx.drawImage(img, 0, 0, w, h);
/// draw horizontal line by cloning
/// already drawn tiles before it
while (w < canvas.width) {
ctx.drawImage(canvas, w, 0);
w *= 2;
}
/// clone vertically, double steps each time
while (h < canvas.height) {
ctx.drawImage(canvas, 0, h);
h *= 2;
}
}
您可以在 implementation this was used for（具有实时缩放和平铺功能的视频墙）中看到性能良好。
为了将它更多地投射到你所拥有的东西上 - 你可以简单地将画布绘制到一个新位置并填充新的“间隙”，而不是像上面那样绘制每个图块：
ctx.drawImage(myCanvas, offsetX, offseY);
fillGap();
您可以使用 drawImage 进行剪辑，但画布会在内部将其剪辑为新的，因此当您将部分图像移到画布外时，在 JavaScript 中剪辑图像没有任何好处。
【讨论】：