时间:2021-07-01 10:21:17 帮助过:31人阅读
(1)在可见画布上画出一个圆。
(2)在可见画布上画出一个三角。
(3)在可见画布上画出一个方块。
“双缓冲”技巧则是这个样子:
(1)在非可见画布上画出一个圆。
(2)在非可见画布上画出一个三角。
(3)在非可见画布上画出一个方块。
(4)将非可见画布上的内容一次性画到可见画布上。
也就是说,在浏览器上,使用双缓冲技术进行canvas对象的绘制只会对浏览器进行一次渲染。就理论而言,在需要绘制的东西非常多的时候,双缓冲技术可以有效减少页面闪烁次数。
之前做过实验,在canvas画布中有若干个圆做无规则碰撞运动,设定两个对照组,一个用传统方法绘制圆,另一个则是使用双缓冲技巧。以下是实验记录:
第一次对比:
两组都是900个圆在CANVAS中进行无规则运动并相互碰撞,两组都运行流畅
第二次对比:
两组都是1100个圆在CANVAS中进行无规则运动并相互碰撞,两组都运行流畅
第四次对比:
两组都是2100个圆在CANVAS中进行无规则运动并相互碰撞,两组都开始出现掉帧现象
第五次对比:
两组都是2500个圆在CANVAS中进行无规则运动并相互碰撞,两组都有较为明显的卡顿现象,仍然没有明显的性能差别
第六次对比:
两组都是3000个圆在CANVAS中进行无规则运动并相互碰撞,两组都卡顿,仍然没有明显的性能差别
第七次对比:
两组都是3500个圆在CANVAS中进行无规则运动并相互碰撞,两组都很卡顿,仍然没有明显的性能差别
当时的出的结论是:双缓冲技巧对于HTML5 CANVAS性能提升效果并不明显。
现在想来,其实还有一种可能:浏览器把性能都用在计算那几千个撞来撞去的圆的速度、角度变化上去了,而“大量绘制图像”的实验目的并没有得到体现。
另外,所谓“卡顿程度”在当时是使用肉眼判断的,这又是另一个不严谨之处。
此技巧并不复杂,我想题主还是可以一试的。