html - 在 HTML5 Canvas 中绘制 X 数量的圆圈的最快方法是什么?

标签 html performance canvas html5-canvas

关于 Canvas 绘制速度的简单问题。

在 1 个 Canvas 中绘制 100 个圆圈还是在 100 个 Canvas 中绘制 1 个圆圈更快?

最佳答案

在一张 Canvas 上画 100 个圆要容易得多:

当调用相同的 Action 时,无论是 1 canvas * 100 circles,还是 100 canvas * 1 circle,您仍然告诉程序绘制完全相同的次数

那么有什么区别呢?

当你向程序引入 100 张 Canvas 时,程序运行速度会慢很多,因为它需要在后台存储这些 Canvas 。虽然速度不会降低太多,但还是会降低。

1 个 Canvas 的另一个好处是控制一个 Canvas 上的所有内容比控制 100 个 Canvas 要容易得多。

编辑:在一个 Canvas 上,您也可以让圆圈重叠(如果需要),但是如果您有 100 个 Canvas ,则圆圈不能重叠。

希望对你有所帮助:)

关于html - 在 HTML5 Canvas 中绘制 X 数量的圆圈的最快方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42369196/

相关文章:

javascript - JQuery-appendTo() 的问题

将多核合并为单核处理,在 linux 上,可能吗?

javascript - 播放器未出现在 Canvas 上(Javascript + html + css)

javascript - 动态调整复杂 Canvas 路径 HTML5

performance - 如何在使用 Spring EntityManager Hibernate 持久化大型集合时提高性能

javascript - 在窗口调整大小时动态调整 Canvas 大小

javascript - 如何通过我的网络服务器创建一个使用 php 作为代理的外部站点 iframe? (避免 CORS)

html - 2 个并排输入,其下的错误消息对齐

javascript - 使用 Angular JS 时如何在 ng-repeat 内的 img 标签中显示图像?

performance - 如何增加亚马逊 EC2 T2.micro 实例上的每秒请求数?