HTML5 Canvas 平移图像与裁剪的效率

Question

有很多关于在 canvas 中平移背景图像的问题（即在角色居中的游戏中模拟 'camera'）- 大多数答案建议使用 canvas' translate 方法。

但既然你必须在每一帧中重新绘制图像，为什么不直接剪辑呢？这对效率有影响吗？

特别是，像这样平移是个坏主意吗？（此示例显示了沿一个方向移动的相机的简化平移）

let drawing = new Image();
drawing.src = "img_src";
drawing.onload = function () {

    ctx.drawImage(drawing, 0, 0);
    let pos = 0
    
    setInterval(() => {
        pos += 1
        ctx.clearRect(0, 0, cnvs.width, cnvs.height);
        ctx.drawImage(drawing, -pos, 0 ); // "pans" the image to the left using the option `drawImage` parameters `sx` and `sy`
    }, 33);
};

示例结果：fiddle

提前致谢！

Answer 1

使用 t运行sform 矩阵控制相机的主要优点是您不必更新世界中的所有元素，只需移动世界即可。

所以是的，如果您愿意只移动一个元素（如您的情况那样是背景），那么只移动那个元素可能是更好的选择。
但是如果你需要几层元素都相对于相机移动，那么使用t运行sformation matrix是更好的选择。

至于性能，我没有运行这方面的任何基准测试，但我怀疑它完全相同，但在弄乱 drawImage 的裁剪功能时要小心，在至少 .

HTML5 Canvas 平移图像与裁剪的效率

HTML5 Canvas efficiency of panning image by Translate vs. Clipping

javascript

performance

drawimage

pan

html5-canvas