Question

我尝试使用canvas对象构建一个可滚动的tilemap，它会自动计算相对于屏幕分辨率的大小，并相对于（更大）地图上的位置呈现tile。

我计划移动生成的图块，只绘制需要绘制新图块的图块。

这意味着我滚动地图，在顶部绘制新的图块（例如向上移动）并删除现在位于可见画布之外的最后一块图块。

我的问题是：

我认为改变画布中每个图块的位置对性能非常有好处，我认为可以使用getImageData()和putImageData()解决这个问题，但仍然存在一个问题左：

如果我只是移动这些瓷砖并绘制新的瓷砖，它将始终“跳”30px（1瓷砖= 30x30），那么是否有一种简单/性能技术上很好的方法来实现平滑，线性滚动效果？< / p>

Answer 1

只需使用drawImage或模式填充棋盘（后者需要您使用translate来将棋盘放在正确的位置）。

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中剪切图像。

HTML5 Canvas平滑滚动tilemap

1 个答案: