Question

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

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

谢谢！

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

Answer 2

有几种提高性能的技术，但最终所有这些都取决于您要放入画布中的大量元素，因此在重构代码时，请考虑如何：

绘制较少的元素，例如在缩小图片中无需绘制那些微小的标签
组/集群内容，通过这种方式您可以绘制组中所有元素的表示形式，谷歌地图做得非常好：https://cloud.google.com/blog/products/maps-platform/how-cluster-map-markers
使用JavaScript游戏引擎性能是游戏引擎非常了解的，您可以利用以下一种优势：https://github.com/collections/javascript-game-engines

...并且请记住，网络上尚无针对性的银弹解决方案；如果性能对您的应用至关重要，则可能不应该在浏览器中显示。