调用 canvas.drawImage() 时的性能问题

Posted 2023-03-25

【中文标题】调用 canvas.drawImage() 时的性能问题

【英文标题】：Performance issue when calling canvas.drawImage()

【发布时间】：2020-02-01 17:34:22

【问题描述】：

我的来源太大，所以我只会粘贴相关部分。

const img = new Image();
img.src = "test.svg";

canvas.drawImage(img, 0, 0, widthIncremented, heightIncremented);

现在它在requestAnimationFrame 中运行。代码所做的就是，让图像越来越大，让它看起来越来越近。

在 Firefox 和 Edge 中，它在低端设备上运行速度非常慢。我想知道，我们如何优化这个过程？因为它每次都将 svg 转换为位图，所以速度很慢吗？像素太多？

【问题讨论】：

我想我们需要更多的上下文，例如循环内部或外部的内容，例如图像大小......而且，canvas.drawImage() 而不是context.drawImage() 是否正常?

【参考方案1】：

不用画大图，你可以scale canvas