javascript - HTML5 Canvas ~ 使用绘制元素平滑快速缩放，而不是图像 ~ 如何？

Question

有一些关于缩放图像的帖子(例如，HTML5 Canvas Image Scaling Issue)；但是，我需要深入了解如何以平滑的方式快速缩放数百个简单的绘制元素(正方形、线条、弧线等)。我希望它看起来像一个动画，现在使用鼠标滚轮缩放(以 0.05 为增量缩放)过渡是不稳定的。

Optimizing Canvas 上有一个有趣的见解。这建议在屏幕外 Canvas 上进行预渲染，但这可能会导致浏览器出现内存问题(我们已经在突破极限)。

这是一个包含数百个绘制元素的工程示意图示例:

谢谢!

Answer 1

问题是每帧重新绘制所有元素。一种简单的方法是将整个图像绘制到 Canvas 上。然后每次要在图像上绘制图片时，将 Canvas 绘制到另一个 Canvas 上。

const imgCanvas = document.createElement('canvas');
const imgCtx = imgCanvas.getContext('2d');

// Draw the each elements to imgCtx
// ...

在执行缩放时重新绘制:

// Scale the canvas
ctx.scale(x, y);
// Draw the pre-drew image onto screen
ctx.drawImage(imgCanvas);