你真的了解Canvas吗--解密十三【ZRender篇】
目录
先看静态图结果
入口
分析
textContent
textConfig
主流程①el.update()
updateTransform更新transform值
update text content
新增部分②
总结
今天做了4个图形的绘制以及图形附带文字的显示,最后一小部分就是运用三方库dat.gui来实现一个stroke percent的图形绘制的一步步过程显示,接下来开始我们今天的探秘!
先看静态图结果
显而易见5个图形Circle、Rect、Sector、Polyline以及smooth Polyline
简单的部分我就直接过滤掉了,前两个图形复杂点的就涉及一个带圆角的rect的实现,我放在这篇文章里了,感兴趣的同学可以查看。
Sector的部分也比较繁琐,我打算专门用一篇文章讲解,到时候这边我也会做一个关联~
PolyLine折线图之前我也实现过,这里就多了一个smoot