HTML5画布~使用绘制的元素而不是图像进行平滑快速缩放~如何？
HTML5画布~使用绘制的元素而不是图像进行平滑快速缩放~如何？
提问于 2019-03-06 05:06:26
有一些关于缩放图像的帖子(例如，HTML5 Canvas Image Scaling Issue)；然而，我需要深入了解如何快速缩放数百个简单的绘制元素(正方形、线条、圆弧等)。以一种平稳的方式。我希望它看起来像一个动画，现在使用鼠标滚轮缩放(以0.05增量缩放)，过渡是起伏不定的。
在Optimizing Canvas上有一个有趣的见解，它建议在屏幕外的画布上进行预渲染，但这可能会导致浏览器中的内存问题(我们已经达到了极限)。
以下是一个包含数百个绘制元素的工程示意图示例：
谢谢！
回答 2
Stack Overflow用户
发布于 2020-01-28 11:23:53
问题是每帧重新绘制所有元素。一种简单的方法是将整个图像绘制到画布上。然后，每次您想要在图像上绘制图片时，都可以将画布绘制到另一个画布上。
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);Stack Overflow用户
发布于 2020-01-30 00:46:39
有几种技术可以提高性能，但归根结底，这一切都取决于您在画布中放置的元素的绝对数量，因此，当您重构代码时，请考虑如何：
更少的元素，例如，在缩小的图片中不需要绘制那些微小的标签
- group/cluster
- draw 就像你绘制组中所有元素的表示一样，谷歌地图做了一项非常好的工作：https://cloud.google.com/blog/products/maps-platform/how-cluster-map-markers
- use a JavaScript 它是游戏引擎非常了解的东西，你可以利用它：https://github.com/collections/javascript-game-engines
...and请记住，web上的性能没有唯一的灵丹妙药；如果性能对你的应用程序至关重要，那么它可能不应该出现在浏览器上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55011573
复制相关文章
相似问题
腾讯云开发者
