聊聊Canvas渲染相关 (非API层,偏框架设计方面)

·  阅读 2192
聊聊Canvas渲染相关 (非API层,偏框架设计方面)

image.png

  1. 渲染机制
  2. 渲染性能分析
  3. 非即时渲染 (即时渲染)
  4. 分片渲染
  5. 分画布图元拆分渲染

渲染机制

  • Canvas绘制机制:整个画布是一个画板,在上面进行绘制各种各样的图形,一旦绘制错误需要改正,就需要重新绘制。

     ...
     ctx.fillRect(0,0,10,10);
     ctx.clearRect(100, 100, 100, 100);
     ctx.fillRect(0,0,100,100);
    复制代码

渲染性能分析

注意关于图形计算,例如复杂图形推导 不算在渲染性能进行分析。

渲染性能主要分析以下几点:

  • 渲染图元数量 (视锥体内容[当前视口内容])
  • 渲染图元的频率 (例如交互式分析,就需要实时刷新)

对应优化手段

  • 控制可视区域数据。
  • 减少刷新频率 或者将操作行为进行切片。
  • 即时渲染和异步渲染。
  • 分片/离屏渲染/全局渲染局部渲染。
  • ...

非即时渲染

即时渲染指用户交互行为一旦触发立刻执行callback。比如下面的场景:

一个用户控制实体颜色16ms内触发了N次。我们有俩种解决办法:

image.png

  1. 每次触发都进行draw()的操作重新绘制需要绘制N次。
  2. 每隔16ms执行draw()的操作绘制最终呈现的结果。

分片渲染

分片渲染本质上是将一个列表分片,将一次渲染分割成多次渲染。减少绘制图元,能够提高帧率。

通过上面的图我们可以看到分片渲染会导致整体的渲染时间变长,所以这种方案并非用于渲染的性能优化方案,而是作为提升帧率和响应效果的优化方案。

分画布拆分图元渲染 (也算是分片)

试想一个场景 画布内有非常多的图元 图元分为很多类别,比如文字,基础几何图形... 而文字内容很多 更新频率非常低 几乎不更新 怎么设计合理? 我提供一个思路,我将用俩个画布分别绘制这俩部份内容分别是text还有shape。进而减少更新的内容 提高帧率(如下图)。

image.png

最后

可视化相关的架构设计,源码学习,日常开发。我会逐步进行深入分享。如果对你有帮助请关注我后续的内容。有需要的同学可以加一下我的联系方式(在我的主页,拉你进群聊)。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改