Canvas 动画引擎解析与微信小程序中的应用

点击观看大咖分享

抗击疫情，腾讯云在行动。在开发微信小程序的过程中，我们经常需要展现一些图形和图表。目前市面上有好几款常用的图形库，在这些图形库的底层都有渲染引擎在支撑。 ZRender 是其中一款非常优秀的 Canvas 动画引擎，它也是 ECharts 图表库底层的渲染引擎。

本次腾讯云大学大咖分享课程邀请 腾讯云最具价值专家TVP 章小飞 分享关于“Canvas 动画引擎解析与微信小程序中的应用”课程的内容。

**作者简介：**章小飞 腾讯云最具价值专家（TVP）/ 前端技术专家。网名大漠穷秋，先后使用并研究过 Flex、jQuery、Extjs、Backbone、AngularJS等常见的前端开发框架。先后著、译有《Ext 江湖》《ActionScript3.0 游戏设计基础》《用 AngularJS 开发下一代 Web 应用》（ 2013 年最佳引进技术图书）《迈向Angular2》等书籍。对技术拥有无限热情，热爱分享，曾在30多家企业，多个线上和线下大会进行过前端技术的宣讲和传播。

本次分享内容：

1、Quark Renderer 引擎可以用来做什么？
2、Canvas、SVG和WebGL
3、人们一直在追求 60 fps 的极致体验
4、requestAnimationFrame 与动画帧算法
5、Quark Renderer 引擎的整体结构
6、动画系统
7、渲染系统
8、事件系统
9、多引擎切换（Canvas \ SVG）
10、构建和发布 Quark Renderer
11、接下来做什么？
12、源码和参考资料链接
13、Q&A环节

我跟大家一样，在工作的过程当中经常想去阅读别人的源代码，因为大牛老师们说，如果你想自己进步快，就去阅读一些比较优秀的开源项目的源代码，我就听信了他们的话好多次想尝试阅读代码，前端、Java、Linux等，然后很快就发现读不下去。就像下图所描述的场景一样，相信大家都遇到过这样的情况。

后来我经历的次数多了后，逐渐理解这件事了。发现阅读别人的代码本质上是一种逆向工程，我们所看的别人的代码，实际上就像一座已盖好的大楼，就像下图，大家看到了大楼的外观灯火辉煌，很雄伟的一个模样，但实际上要把这栋大楼看懂的话是不容易的，因为我们不是这栋大楼的设计者。通过看大楼的外观，去看到大楼到底是怎么设计的，把它变成设计的蓝图是比较难的，这是为什么阅读别人的代码总是比较难的一个原因。

​

那么我了解到这件事之后，想重新尝试曾经想读的项目代码，重新开始读它，在读的过程中，我就会使用一些新的方法，比如一边读一边画图，就好像我也是一个设计师或者架构师，就好像这个项目是我自己设计的、写的。那么我把它的蓝图画出来，然后一步一步去不停的往前走，一点一点完善它。我发现这样做有点起色了，所以把这过程也分享给你们。

市面上有大量的开源项目，像GitHub或国内的gitee上面有很多的开源项目。很可惜的是里面有大量的开源项目实际上并没有提供这种设计蓝图。这就依赖于我们自己去分析它。如果我们没有这种设计蓝图，或者自己不去把这个图画出来的话，就好像进入了迷宫，在代码的迷宫里花费了很多的时间，很多的精力，最终还是不得不放弃，或者是看不到这个项目最精华的部分或是一个全貌，就是所谓的big picture是看不到的。

​

**一、**Quark Renderer 引擎可以用来做什么？

今天给大家演示两个案例，一个是浏览器环境里面的运行效果，另一个是在微信小程序里面的运行效果。最后我还有一个node-canvas环境的演示效果，因为这里面现在一个还有比较严重的bug，那我在下一次讲的时候，第3个演示的案例就会出来，今天给大家演示两个。Quark Renderer目前本身还处于开发的状态，我自己给它定的版本号目前是1.0.14，我会尽快把它第1个版本发布出来，在发布前我会把所有的恶心的地方都磨平，把example都写好。接下来给大家演示效果。（观看）

​

​

Canvas 在微信小程序中的问题，要重点注意的有两个地方：

第1个，在微信小程序中 Canvas 动画性能比较差，在真机运行的时候性能是很差的，不要去启动，一启动话基本上就没办法看了，卡成PPT那样，最多能跑到20Fps就是20帧每秒，大概就这样，这是最好的情况。

第2个，安卓的机器现在好像还是不能调试，这是我看到他们在开发者的社区上面的回复，1月7号的时候，安卓机还是没有办法调试Canvas API。

二、ZRender 引擎的整体结构

有人给了benchmark的一个测试的结果，如下图。你当然也可以自己去跑benchmark，市面上有好多工具可以帮你去做，也可以自己写脚本做测试，实际上就是跑分。测试的结果大概是在巨大量的对象的情况下，就是在Canvas里渲染很多的图形对象情况下，它的性能是比不上SVG渲染器，这是给出来的一个结果。

目前市面上典型的底层渲染技术就三个，Canvas、SVG和WebGL。

Canvas的优点是，性能比较高；各种平台的支持都很好，我给大家列出来的三个就是浏览器、node-canvas 、微信小程序，当然也包括其他各种小程序了，因为小程序它内部本质上都是嵌入了浏览器的引擎的内核；第三方的包，各种各样的库有很多。

缺点是，没有一些内置的基础设施，比如说事件系统是没有的，给大家演示一个事件的例子看（点击），整个的事件处理过程需要自己封装出来，Canvas是没有提供的，它只是一个用来操作像素的很底层的API，提供的API是非常贴近于底层的，它上层的比较好用的暴露给开发者调用的API并没有封装得很好。它内部是没有同时拖多个对象,这样一些机制都是没有提供的，需要你自己封装出来，或是借助于第三方的开源库来封装，这是Canvas是本身的一个特征。

SVG的优点是,在巨大量（百万级）的对象渲染场景下，性能是比较高。它所提供的那些接口比Canvas稍微好一点点，但也没有好到哪里去，有好多地