你真的了解Canvas吗--解密三【ZRender篇】

书接上文你真的了解Canvas吗--解密二【ZRender篇】

目录
        入口
        挖掘
        主流程
                ① layer相关操作
                        1、new Layer()
                        2、this.insertLayer()
                        3、layer.initContext()
                ② 主流程

---

入口

我们走最后一个方法（把整体的流程贯穿起来）

zr.add(curve);

最后将我们的绘制实例加入到zrender中，下面看实现

挖掘

zrender.js

Storage.js-将绘制实例添加到_roots中

Element.js

zrender.js-主动标记了需要刷新

Animation.js-开始动画（之前我提到过，后面就不赘述）

看着是不是一样，又走回第一步的初始化方法

答案，当然是不一样的！现在我们可是有了图形的绘制初始化对象curve

前面都一样，我们直接来看这里

• 主流程

Painter.js

Storage.js

Storage.js

Storage.js-将el图形对象添加到_displayList中

那么getDisplayList函数中指向同一个内存的displayList就有值了，即返回的list①也有值了。

继续往下看_paintList函数主流程

① layer相关操作

这里我刚开始看也是很懵，不要怕，总结起来就是新建了一个class Layer并且是对它的一些属性赋值，这个属性赋值方面可以先不去看，那么就只有一个prevLayer = layer这行，每次会把处理好的layer赋值给之前的layer，然后再看看函数updatePrevLayer()

发现也仅仅是对一些属性的赋值，对我们的流程执行并没有那么重要，再看看getLayer函数

1、new Layer()

disableUserSelect函数它来源于util工具类的一个函数，具体可以看我的番外篇之util。(可以看的出就是让dom不可交互)

Layer的出现就是出现了一个新Dom->canvas，下面是一些细节实现

Painter.js

helper.js-getSize()

Painter.js-createRoot()

 2、this.insertLayer()

1.this._zlevelList->[0]; 重要，后面要用
2.this._layers->{0: Layer实例}; 也重要，后面要用

至此，应该是这样一个DOM结构

3、layer.initContext()

创建一个2d画布，这是canvas的基石

② 主流程

由于篇幅较长，下一篇我们继续讲_doPaintList函数

你真的了解Canvas吗--解密四【ZRender篇】

如果觉得有收获，麻烦给个赞和关注。你的鼓励是我写作的动力，大家一起学习一起进步。