javascript - HTML5 Canvas 平滑滚动瓷砖 map

Question

我尝试使用 Canvas 对象构建可滚动的图 block map ，该对象会自动计算相对于屏幕分辨率的大小，并相对于(较大) map 上的位置渲染图 block 。

我打算移动生成的图 block ，只绘制需要新绘制的图 block 。

这意味着我滚动 map ，在顶部绘制新的图 block (例如向上移动)并删除底部上现在不在可见 Canvas 之外的最后图 block 。

我的问题是:

我认为改变 Canvas 中每个图 block 的位置对性能来说并不是很好，我认为这可以使用 getImageData() 和 putImageData() 来解决 但还剩下一个问题:

如果我只是移动这些图 block 并绘制新图 block ，它总是会“跳跃”30px(1 个图 block = 30x30)，那么有没有一种简单/性能技术上好的方法来实现平滑、线性滚动效果？

Answer 1

只需使用drawImage或图案填充棋盘(后者要求您使用翻译将图 block 置于正确的位置)。

drawImage 采用新的目标尺寸作为参数，因此您也可以缩放图 block 。

这是我为其他问题所做的模式实现，但我认为您应该能够看到代码中发生了什么:

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 中看到的那样。 (具有实时缩放和平铺功能的视频墙)。

要将其更多地投影到您所拥有的内容 - 您可以简单地将 Canvas 绘制到新位置并填充新的“间隙”，而不是像上面那样绘制每个图 block :

ctx.drawImage(myCanvas, offsetX, offseY);
fillGap();

您可以使用drawImage进行裁剪，但是 Canvas 会在内部将其裁剪为新的，因此当您将图像的一部分移到 Canvas 之外时，在JavaScript中裁剪图像没有任何好处。