跳到主要内容

canvas优化

哪些因素会影响canvas的性能​

  • 绘制的图形的数量和大小会影响canvas的性能

canvas优化方式​

  • 如果某些长时间的逻辑计算影响主线程，可使用WebWorker
  • 利用分层渲染复杂场景
  • 图形数量过多，但是只刷新部分 可以使用局部渲染

分层渲染​

通过分层渲染可以提高渲染效率

  • 创建多个 Canvas 元素，每个 Canvas 元素代表一个图层
  • 设置每个Canvas的位置、大小、层级关系
  • 绘制图形到不同的图层，实现分层渲染

局部渲染​

  • 针对大量图形元素只有部分区域需要更新的情况，通过局部渲染只对需要更新的区域进行绘制，而不用整体更新渲染， 从而提高绘制效率和性能

实现原理

  • 记录需要更新的区域的位置
    • 如果获取要更新的区域？
      • 如果更新的操作，是用户触发的，可以通过事件，如点击事件，通过事件拿到当前用户点击的位置，来计算这个区域
  • 在每次绘制前，先清除需要更新的区域
    • ctx.clearRect方法来清除指定的更新的区域
  • 更新并重绘需要更新的区域
    • ctx.fillRect方法来绘制图像，来更新区域