（1）在可见画布上画出一个圆。
（2）在可见画布上画出一个三角。
（3）在可见画布上画出一个方块。
“双缓冲”技巧则是这个样子：
（1）在非可见画布上画出一个圆。
立即学习“前端免费学习笔记（深入）”；
（2）在非可见画布上画出一个三角。
（3）在非可见画布上画出一个方块。
（4）将非可见画布上的内容一次性画到可见画布上。
也就是说，在浏览器上，使用双缓冲技术进行canvas对象的绘制只会对浏览器进行一次渲染。就理论而言，在需要绘制的东西非常多的时候，双缓冲技术可以有效减少页面闪烁次数。
之前做过实验，在canvas画布中有若干个圆做无规则碰撞运动，设定两个对照组，一个用传统方法绘制圆，另一个则是使用双缓冲技巧。以下是实验记录：
第一次对比：
两组都是900个圆在CANVAS中进行无规则运动并相互碰撞，两组都运行流畅
第二次对比：
两组都是1100个圆在CANVAS中进行无规则运动并相互碰撞，两组都运行流畅
第四次对比：
两组都是2100个圆在CANVAS中进行无规则运动并相互碰撞，两组都开始出现掉帧现象
第五次对比：
两组都是2500个圆在CANVAS中进行无规则运动并相互碰撞，两组都有较为明显的卡顿现象，仍然没有明显的性能差别
第六次对比：
两组都是3000个圆在CANVAS中进行无规则运动并相互碰撞，两组都卡顿，仍然没有明显的性能差别
第七次对比：
两组都是3500个圆在CANVAS中进行无规则运动并相互碰撞，两组都很卡顿，仍然没有明显的性能差别
当时的出的结论是：双缓冲技巧对于HTML5 CANVAS性能提升效果并不明显。
现在想来，其实还有一种可能：浏览器把性能都用在计算那几千个撞来撞去的圆的速度、角度变化上去了，而“大量绘制图像”的实验目的并没有得到体现。
另外，所谓“卡顿程度”在当时是使用肉眼判断的，这又是另一个不严谨之处。
此技巧并不复杂，我想题主还是可以一试的。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
471
收藏
