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

目录
        📚前言
        入口
                1.polyline
                        style 
                2.动画
                        .animate
                ​​​​​​​        ​​​​​​​.when 
                ​​​​​​​        .start
         总结 

---

📚前言

我们在前面几篇的文章里面介绍完了主流程，也是部分zrender的实现原理。但是贝塞尔曲线只是canvas的冰山一角，我们要彻底吃透canvas，那么就首先需要把所有的绘图技巧搞定，相信大家也知道，那就是Path的子类，当然还有一些不是继承于Path的类。

于是在后面的篇幅中，我主要介绍其他绘图技巧，顺带着探索zrender里面其他“不为人知”的功能。

入口

var zr = zrender.init(document.getElementById('main'));

var points = [];
for (var i = 0; i < 3; i++) {
    points.push([Math.random() * 800 + 300, Math.random() * 500 + 100]);
}

var polyline = new zrender.Polyline({
    style: {
        lineDash: [20, 5],
        stroke: 'rgba(220, 20, 60, 0.8)',