前端美术课

【班长】：起立！
【同学】：老师好！
【老师】：大家好，我是新来的前端美术老师，codexu！
复制代码

同学们应该都学习过或听说过 canvas ，这都不重要，你们以为我要教你们 canvas 的 api 吗？

不，这太蠢了，请出今天主角 二维绘图引擎 —— ZRender ，如果你听说过大名鼎鼎的 ECharts ，我们今天说的 ZRender 就是它的渲染器。

并且你不需要任何 canvas 使用经验就可以轻松上手这款绘图框架，当然你如果不愿意看我在这哔哔，发你一份文档自己去看吧《ZRender官方文档》

正式上课

安装 ZRender

直接使用 npm 安装，需要源码或使用 <script> 引入的通过 github 下载。

$ npm install zrender
复制代码

那个装不上报错的你就不会试试 cnpm、yarn 吗？不想用？你下个 nrm 然后 nrm use taobao。

引入 ZRender

import ZRender from 'zrender';
复制代码

在 HTML 引入的同学

<script src="./dist/zrender.js"></script>
复制代码

在 html 中写一个容器

<div id="main"></div>
复制代码

初始化 ZRender

初始化一块 300 宽高的画布，如果不传递 init 函数第二个参数，需要为容器设置宽高，画布会自动填满容器。

const zr = ZRender.init(document.getElementById('main'), {
  width: 300,
  height: 300
});
复制代码

我炙热的红心 :heart:

把书翻到《Heart》， ZRender 提供了 20 多种图形，来跟着老师一起写：

const heart = new ZRender.Heart({
  shape: {
      cx: 150,
      cy: 140,
      width: 50,
      height: 70
  },
  style: {
    fill: 'red'
  }
});
zr.add(heart);
复制代码

知识点

heart.on('click', function() {
  this.animate('shape', true)
    .when(100, {
      width: 60,
      height: 80
    })
    .when(600, {
      width: 50,
      height: 70
    })
    .start()
})
复制代码