0

我尝试使用画布对象构建一个可滚动的图块地图，该对象会自动计算其相对于屏幕分辨率的大小，并相对于（更大的）地图上的位置渲染图块。

我打算移动生成的瓦片，只绘制需要重新绘制的瓦片。

所以这意味着我滚动地图，在顶部绘制新图块（例如向上移动）并删除底部的最后一个图块，这些图块现在不在可见画布中。

我的问题是：

我认为改变画布中每个图块的位置对性能来说并不是很好，我认为这可以解决getImageData()，putImageData()但仍然存在一个问题：

如果我只是移动这些图块并绘制新图块，它总是会“跳跃”30px（1 个图块 = 30x30），那么是否有一种简单/性能技术上好的方法可以使它具有平滑的线性滚动效果？

4

1 回答 1

2

只需使用或图案填充板枯萎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;
    }
}

正如您在用于（具有实时缩放和平铺的视频墙）的实现中看到的那样，性能很好。

要将其更多地投影到您拥有的东西上-您可以简单地将画布绘制到新位置并填充新的“间隙”，而不是像上面那样绘制每个图块：

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

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

于 2013-08-07T22:21:46.767 回答