29 | 怎么给Canvas绘制加速？
月影
该思维导图由 AI 生成，仅供参考
你好，我是月影。
上节课，我们从宏观上了解了各个图形系统在性能方面的优劣，以及影响性能的要素。实际上，想要解决性能问题，我们就必须要知道真正消耗性能的点，从而结合项目需求进行有针对的处理，否则性能优化就是纸上谈兵、空中楼阁。
所以这节课，我们就深入讨论一下影响 Canvas 绘图性能的因素，一起来分析几个不同类型的 Canvas 项目，找到的性能瓶颈以及对应的解决办法，从而学会对大部分 Canvas 项目进行性能优化。
我们知道，Canvas 是指令式绘图系统，它有状态设置指令、绘图指令以及真正的绘图方法（fill 和 stroke）等各类 API。通常情况下利用 Canvas 绘图，我们要先调用状态设置指令设置绘图状态，然后用绘图指令决定要绘制的图形，最后调用真正的 fill() 或 stroke() 方法将内容输出到画布上。
那结合上节课的实验我们知道，影响 Canvas 性能的两大因素分别是图形的数量和图形的大小。它们都会直接影响绘图指令，一个决定了绘图指令的多少，另一个决定了绘图指令的执行时间。通常来说，绘图指令越多、执行时间越长，渲染效率就越低，性能也就越差。
因此，我们想要对 Canvas 性能进行优化，最重要的就是优化渲染效率。常用的手段有 5 种，分别是优化 Canvas 指令、使用缓存、分层渲染、局部重绘和优化滤镜。此外，还有一种手段叫做多线程渲染，是用来优化非渲染的计算和交互方面导致的性能问题。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Canvas绘图性能优化是本文的主题，文章介绍了6种常见的优化手段。首先，分析了影响Canvas绘图性能的因素，包括图形数量和大小。重点讨论了优化Canvas指令和使用缓存这两种优化手段，通过减少绘图指令的数量和使用缓存来提高绘图性能。另外，介绍了分层渲染和局部重绘两种优化手段，分别适用于不同的绘图场景。文章还提到了优化滤镜和多线程渲染的方法，以及如何在WebWorker中以单独的线程来渲染，避免对主线程的阻塞。总结了性能优化的原则，包括减少绘图指令数量、使用缓存、分层渲染、局部重绘、优化滤镜和多线程渲染。最后，鼓励读者尝试实现一个粒子效果，并分享本文的内容。整体来说，本文内容丰富，涵盖了多种优化手段，对于需要提升Canvas绘图性能的开发者具有很高的参考价值。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68
《跟月影学可视化》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(2)
- 最新
- 精选
嗨小二“因为不使用缓存直接绘制的是矢量图，而通过缓存 drawImage 绘制出的则是位图“，我怎么记得canvas绘制的都是位图，因为使用canvas绘制图形，放大后就会失真，为什么这里会说”不使用缓存直接绘制的是矢量图“，麻烦解释下作者回复: 你可以试一下，现代浏览器的Canvas绘制的图放大不会失真了，当然这里不是放大网页本身，而是在Canvas中放大Path2D绘制的图形。
2020-10-255- Mingzhang在屏幕上显示主 Canvas，利用 transferControlToOffscreen 将绘制交由 offScreen canvas 来绘制，而主 Canvas 负责监测鼠标在其上的 move 事件，然后将 event 的坐标 postMessage 给 Web Worker。请问月影这种方法可行吗？
作者回复: 可以的
2020-08-2825
收起评论