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

Question

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

优化画布中有一个有趣的见解，建议在屏幕外画布上进行预渲染，但这可能会导致浏览器中的内存问题（我们已经在突破限制）。

以下是包含数百个绘制元素的工程原理图示例：

谢谢！

Answer 1

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

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);