github4000Star，前端画图引擎ZRender你知道么？

很多人刚学前端的时候，都想画出非常漂亮的图形，在日常的工作与生活中，图表也是非常需要的，很多前端工程师都需要画图表，以此来满足产品经理可视化分析的需求。今天，我们来介绍一款2D的Canvas画图引擎，ZRender，它是由百度开源的Echart里面的一个画图组件，在Github上面已经接近4000个星星。

ZRender有什么特点的？一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型。给我们不一样的Canvas体验。我们甚至不需要去学习Canvas的API，只需要关注要画的图像本身。

ZRender是由数据驱动的，这意味着，我们想画图的时候，我们更多要关心的，只是图像的数据，至于怎么画，ZRender框架已经帮我们解决。例如，我们想画一个圆，我们只要关心圆心跟半径的位置即可，我们想要画一个矩形，只要关心矩形的左上角以及矩形的长宽即可。图像的颜色，透明度这些，都只是这些图像类的参数。更强大的是，如果我们需要这些图像可拖拽，也只要设置一个参数就行。

除此之外，动画效果也是ZRender一个非常强大的地方，在网上，有个ZRender的Demo实际上非常少，大部分都跑不起来，今天我们通过一个例子，来简单讲解下ZRender的一个入门。

第11行，引入我们的ZRender，大家也可以把这个框架下载到自己的计算机上面。

第15行，初始化ZRender，告诉在Redner是在哪个容器上进行画图。

第19行，初始化一个圆。

第20到30行，初始化圆的属性，圆心的位置，半径，风格等等。

第31到37行，这个是设置动画，分别告诉ZRender这个圆在1000毫秒跟2000毫秒的位置。没错，只要告诉最终的位置，移动速度，每秒的坐标表更，引擎可以帮你计算，开发者无需关心。

今天，我们学习了ZRender一个简单的Demo，ZRender还有非常多的特性，可以在官方API中进行学习，有了这个画图神器，相信大家在前端开发中可以如鱼得水。欢迎大家关注我，共同学习，共同进步。大家的支持是我继续唠嗑的动力。同名公众号（沙茶敏碎碎念）