文章/答案/技术大牛

发布

社区首页 >问答首页 >平移图像的HTML5画布效率

问平移图像的HTML5画布效率
EN

Stack Overflow用户

提问于 2021-02-13 07:58:32

回答 1查看 107关注 0票数 0

关于在画布中平移背景图像(即在游戏中模拟一个以角色为中心的“照相机”)，有许多问题--大多数答案都建议使用画布‘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);
};

示例结果：小提琴

提前感谢！

javascript

performance

html5-canvas

drawimage

pan

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-13 08:24:09

使用变换矩阵来控制你的相机的主要优点是你不需要更新你的世界中的所有元素，你只需要移动这个世界。

所以是的，如果你只想移动一个元素(不管是背景，比如你的例子)，只移动一个元素可能是一个更好的选择。

但是如果你需要几层元素才能相对于摄像机移动，那么使用转换矩阵是一个更好的选择。

至于perfs，我没有在这上面运行任何基准测试，但我怀疑这是完全相同的，尽管在处理drawImage的裁剪特性时要小心，至少Safari不能正确处理源画布外部的裁剪是这样的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66182984

复制

相似问题

问平移图像的HTML5画布效率
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问平移图像的HTML5画布效率EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问平移图像的HTML5画布效率
EN