Understanding ZRender: Canvas Rendering, API Usage, and Custom Element Development

Echarts[1]作为前端工程师经常使用的数据可视化库，带来了生动、直观与可交互的数据可视化体验（如图1.1所示），这些功能都离不开强大的前端Canvas库——ZRender[2]提供的底层支撑，该库以API的形式向用户提供画布生成、元素创建、拖拽、裁剪、动画、动态渲染等功能，广泛应用于图形交互、在线文档等大规模前端应用。

图1.1 Echarts可视化图表库

网上对ZRender的介绍非常稀少，本文将从Canvas技术出发，进而展开对ZRender底层原理的介绍，让开发人员逐步掌握ZRender的使用与进一步底层开发方式，达到按需拓展功能的效果。

本文针对的是Canvas2D进行介绍，所有的绘制都来自于getContext("2d")获得的ctx上下文对象（为了便于阅读，下文中我们统一称为Canvas）。

HTML5 Canvas简介

为了帮助初学者快速了解Canvas，本章内容首先介绍Canvas的大致内容，如果您对Canvas有一定了解，那么可以直接跳到第二章开始阅读。

在网页上展示图像的技术有很多，例如<img>标签、Flash、SVG、Canvas等。为了追求数据更好的动态呈现，前端开发中主要使用SVG与Canvas来动态生成图像，SVG以矢量图的形式可实现高保真图像的呈现，但其基于XML文档描述的绘图方式虽然在编辑与交互上具有一定优势，却无法支持像素处理、大量数据绘制等场景。Canvas虽然不具备SVG矢量图的优势，但在像素处理、动态渲染和大量数据绘制上有更好的支持，且性能表现更优。

Canvas被称为是网页上的一块“画布”，这块画布不仅可以绘制各种图形、图像与文字，还能够操作图形进行变形、渐变、动画等操作。不仅如此，利用Canvas中每一个像素点的可操作性，可以实现图像与视频在前端的动态处理。在Canvas强大功能与稳定性能的加持下，Echarts、腾讯文档在线PPT[3]、Explain Everything（在线白板）[4]等大型应用都是基于Canvas实现的。

从开发者角度来看，主流应用都是对Canvas原生API进行了元素封装，使其能够提供满足用户在特定使用场景下的具体可视化需求。本章将从原生API的角度介绍Canvas，了解Canvas提供的各种功能的具体实现。

1.1 Canvas元素绘制

Canvas 2D是一种完全以Javascript脚本语言为驱动的图形绘制技术，绘制操作全部发生在Canvas2D上下文对象（ctx）的各种API上，利用Javascript动态输入各项参数，达到动态绘制的效果。

ctx中提供的原生API主要包括以下9类[5]：

（1）直线图形绘制类：包括线段、矩形的绘制，其他多边形都通过线段绘制来实现；

（2）曲线图形绘制类：包括圆形与弧线的绘制；

（3）线条操作类：包括线条宽度、线帽、线条虚实等的操作；

（4）文本操作类：包括文本绘制与格式处理；

（5）图片操作类：包括图片绘制、图片截取、图片平铺与图片切割；

（6）变形操作类：包括图形平移、缩放、旋转、矩阵变换与画布清空；

（7）像素操作类：包括像素获取与像素输入，获取到的像素信息可以通过Javascript进行像素反转、黑白转换、亮度处理、复古风格、颜色蒙版、透明处理等图像处理；

（8）渐变与阴影类：包括线性颜色渐变、径向颜色渐变与阴影生成；

（9）路径类：包括开始绘制路径、关闭当前路径与判断某个点是否存在当前路径中；

1.2 Canvas进阶

当掌握Canvas基础知识后，可以在下面几个方面进一步进阶：

（1）利用Javascript作为高级编程语言的特性，可以设计出各种交互性强的页面与动画效果：

一方面，开发者通过浏览器提供的多个事件监听方法，为用户提供鼠标点击交互、键盘交互等功能，满足用户对图形的交互操作；另一方面，利用window.requestAnimationFrame()可以实现与客户端帧数匹配的动画效果。

（2）若想做出交互性强的动画效果，需要掌握基础的数学与物理知识：

运动离不开数学与物理规律，在设计动画时应该充分利用现有的数学与物理知识。例如：利用数学中的sin、cos、tan、arcsin等三角函数，可以测算出点之间的距离、确定动画的路径、生成波形运动、脉冲效果等等。

（ 3）Canvas画布作为一块有边界的区域，“边界监测”是动画设计中必不可少的环节：

“边界监测”简单来说，就是给运动物体限定一个范围，从而实现某些动画效果。以圆球ball为例，当圆心x坐标小于半径时，圆球就超出了左边界，圆心x坐标继续变小则圆球左边的部分会超出画布，导致无法显示。边界检测的处理一般包括边界限制、边界环绕、边界生成、边界反弹四种方式。

1.3 Canvas主要应用

Canvas在前端项目中应用十分广泛，主要应用场景有：

（1）视频弹幕

图1.2 Canvas实现视频弹幕效果图

（2）图片与视频前端像素处理

图1.3 Canvas实现图片与视频前端像素处理效果图

（3）前端动画效果

图1.4 Canvas实现前端动画效果图

（4）交互式图表与图形

图1.5 Canvas实现交互式图表与图形效果图

（5）2D游戏

图1.6 Canvas实现2D游戏效果图

ZRender使用入门

工欲善其事，必先利其器。1.1节中介绍了Canvas提供的各类原生API，若想利用这些原生API直接开发前端应用，在效率、性能、程序的健壮、后期的维护等方面都将面临很大的挑战。一个合适的“Canvas库”是大型应用开发的关键。国内开源的Canvas库主要有百度开发的ZRender与蚂蚁集团开发的G[10]，前者是数据可视化工具Echarts的渲染引擎，后者是基础图表类库G2[11]的渲染引擎，这些库的“老大哥”可追溯到纽约时报一名工程师开源的数据可视化库D3[12]，类似的库还有Kinetic.JS[12]和EaselJS[13]。

ZRender相较于其他库，在使用上采用数据驱动的方式，相对简单易懂；在功能上提供完整的事件封装、高效的分层刷新、丰富的图形选项与强大的动画支持；在扩展性上支持任意基础图形元素的拓展，并支持SVG和XML的渲染方式。这些特性使得ZRender备受开发者青睐。

为了帮助读者更快了解ZRender具体做了什么，本章内容将从几个简单例子出发，介绍ZRender的具体用法。

2.1 在项目中引入ZRender

在项目中引入ZRender主要有npm安装与直接下载两种方式。

（1）npm安装:

控制台输入指令‘npm install zrender’进行安装，无需其他操作。安装之后在代码中通过‘import zrender from "zrender"’指令引入zrender模块进行使用。

（2）直接下载：

ZRender 项目在 GitHub 上的地址是 https://github.com/ecomfe/zrender ，下载源文件后，我们可以在源代码中的dist目录找到zrender.js和zrender.min.js，前者是开发版，后者是发布版。

下载之后，需要在 HTML 中加载对应 JavaScript 文件：

<script src=
"./dist/zrender.js"
></script>

在使用 ZRender 前需要初始化实例，具体方式是传入一个 DOM 容器：

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

该初始化方法会在浏览器DOM中生成Canvas标签并进行基础设置，之后就可在JavaScript代码中使用ZRender，调用相关API，绘制出的所有图形元素都会在DOM容器下的Canvas标签中显示出来。

2.2 通过ZRender添加元素到画布

//创建圆圈元素
var circle = new zrender.Circle({
draggable: true,  //可拖拽
shape: {
cx: 150,   //圆心x坐标
cy: 50,    //圆心y坐标
r: 40      //半径
},
style: {
fill: 'black',   //填充色
stroke: '#F00'   //边框色
},
textContent: new zrender.Text({  //内部文字
style: {
fill: 'white',
text: 'Circle'
}
}),
textConfig: {
position: 'inside'  //文字位置
}
});
//添加至Canvas画布
zr.add(circle);
//通过attr()方法修改元素属性
circle.attr('shape', { r: 50 }); //只更新r。cx、cy将保持不变。

ZRender不仅对Canvas支持的点、线、圆、文字、图片等元素进行了封装，还封装了20多种图形元素可供用户使用，如：水滴、心形、正多边形等。

2.3 添加事件监听

ZRender支持直接向元素添加事件，还支持对整块画布进行事件添加：

//为圆圈元素添加事件监听
circle.on('click', function(e) {
console.log(e); //圆圈元素点击事件处理
});
//或者直接给zr整块画布添加事件绑定
zr.on('click', function(e) {
console.log(e); //画布点击事件处理，e中包含点击的元素，点击位置等信息
});

ZRender提供元素独立事件监听的支持，可帮助开发者更自如的掌控画布上的元素。

ZRender支持的事件共有：'click'、'mousedown'、'mouseup'、'mousewheel'、'dblclick'、'contextmenu'。

2.4 添加动画效果

ZRender内部所有元素都支持独立的动画添加。这里说的“动画”可以理解为元素属性的变化，例如元素位置属性发生变化产生位移、大小属性发生变化产生形变、颜色属性发生变化产生颜色渐变……。以下列代码为例，我们可以为上面创建的圆添加一个在屏幕内循环位移的效果。

circle.animate('', true)   //第二个参数为true代表循环该动画
.when(1000, { position: [200, 0] })   //关键帧：1000ms时的位置
.when(2000, { position: [200, 200] })
.when(3000, { position: [0, 200] })
.when(4000, { position: [0, 0] })   //回到初始位移，保证循环流畅
.start(); //立刻开始该动画

2.5 元素组合

G、Kinetic.JS和EaselJS这些Canvas库都提供元素的组合功能，元素组合的作用是：对元素组合的移动、缩放等操作，会映射到每一个子元素上。ZRender同样提供元素组合的底层支持，我们可以通过下列方法添加元素组合：

var g = new zrender.Group();
g.position[0] = 100;
g.position[1] = 100;
g.add(circle);
zr.add(g);

2.6 元素包围盒BoundingRect

ZRender每一个元素都能获得其在画布上的“包围盒”。

var rect = circle.getBoundingRect(); //获取元素的包围盒
var boundingRect = new zrender.Rect({
draggable: true,
shape: { x: rect.x-3, y: rect.y-3, width: rect.width+6, height: rect.height+6 },
style: { fill: "rgba(255,255,255,0)", stroke: "rgba(0,0,0,1)", lineWidth: 1, lineDash:[3] }
});
zr.add(boundingRect);

为了支持文字、各种形状和元素组合的包围盒呈现，且满足经过各种变换后元素包围盒位置的准确，ZRender中为每一个元素维护了一个transition矩阵，通过矩阵进行位置计算保障元素在任何状态下包围盒的准确展示，如图2.1所示。

图2.1 ZRender中Circle元素的包围盒

元素组合与包围盒的引入，让在线文档、在线编辑器、在线白板等应用的开发变得更为方便快捷。

ZRender源码解析

3.1 总体结构

ZRender是一个开源的“轻量级”图形库，这便于开发者理解系统内部运行机制，但是ZRender只公开了使用文档而无开发文档。若想在ZRender基础上进一步开发，需要阶段性掌握其底层的原理。

图3.1 ZRender总体结构图

如图3.1展示了ZRender的总体结构，ZRender采用的是MVC的架构模式，提到MVC模式读者一定不会陌生，ZRender中的M层指的是图形元素数据管理层、V层指的是前端视图绘制层、C层指的是元素事件控制层。此外，图中大圆圈包裹的部分是ZRender内部的核心组成部分，也是我们new一个ZRender实例包含的内容。图中外部的分支是ZRender暴露出来的方法，包括图形元素与工具方法等等，这些方法可供实例调用。

ZRender核心组成部分的介绍如下：

（1）Stroage(M) : shape数据CURD管理。

（2）Painter(V) : Canvas元素生命周期管理、视图渲染、绘画、更新控制。

（3）Handler(C) : 事件交互处理，实现完整dom事件模拟封装。

（4）shape : 图形实体，分而治之的图形策略，可扩展。

（5）tool : 绘画扩展相关使用方法，工具及脚手架。

（6）animation : 动画扩展，提供promise式的动画接口和常用缓动函数。

ZRender源码目录结构介绍如图3.2所示：

图3.2 ZRender源码目录结构

不难看出，ZRender源码对各个模块的封装做的十分完善。我们可以从ZRender的构造函数，看出ZRender的MVC管理机制：

class ZRender {
constructor(id: number, dom: HTMLElement, opts?: ZRenderInitOpt) {
opts = opts || {};
this.dom = dom;
this.id = id;
const storage = new Storage();
let rendererType = opts.renderer || 'canvas';
const painter = new painterCtors[rendererType](dom, storage, opts, id);
this.storage = storage; //绑定Model数据管理层
this.painter = painter; //绑定View视图层
const handerProxy = (!env.node && !env.worker) ? new HandlerProxy(painter.getViewportRoot(), painter.root) : null;
this.handler = new Handler(storage, painter, handerProxy, painter.root); //绑定Controller控制层
this.animation = new Animation({ stage: { update: () => this._flush(true) } });
this.animation.start();
}
}

3.2 Model数据管理层（Storage.js）

ZRender用Storage来存放图形元素，我们通过Storage类的构造函数来了解其内部组成：

class Storage {
    private _roots: Element[] = []   //所有元素存放列表
    private _displayList: Displayable[] = []  //要渲染的元素
    private _displayListLen = 0      //要渲染的元素长度
    //...省略部分增删改查代码
}

从上面代码可看出，Storage主要管理_roots与_displayList两个列表，这两个列表里面值分别是Element类的对象与Displayable类的对象，Stroage还负责对维护的元素进行增删改查等操作，我们可以将Storage理解成存放图形元素的“数据结构”。

Element类、Displayable类都是元素，他们之间到底有什么关系？要想弄清这个问题，我们只需要了解ZRender中各个元素类的继承关系，该继承关系如图3.3所示：

图3.3 ZRender元素类类图

为了实现元素之间的相互独立与代码复用，ZRender对元素进行了系统性的继承与封装，Element元素基础抽象类继承了Animatable、Transformable、Eventful三个有关动画、变换与事件的元素抽象类，为元素提供相关功能支持，Element类被Displayable类所继承，为元素提供显示相关的功能支持，最后，元素具体图形被封装在其独立的Shape类中。

3.3 V–视图层（Painter.js）

首先我们直接来查看ZRender用来进行Canvas渲染的Painter类：

class CanvasPainter implements PainterBase {  //ZRender还支持SVG、VML
    storage: Storage  //数据元素列表
    private _zlevelList: number[] = []  //不同Canvas画布zlevel列表
    private _width: number     //宽度
    private _height: number    //高度
    private _domRoot: HTMLElement  //依赖的dom节点
    constructor(root: HTMLElement, storage: Storage, opts: CanvasPainterOption, id: number) {}
    refresh(paintAll?: boolean) {} //刷新，渲染所有displayable
    private _doPaintList(list: Displayable[],prevList: Displayable[],paintAll?: boolean) {} //渲染dispalyable列表
    private _doPaintEl(el: Displayable,currentLayer: Layer,useDirtyRect: boolean,repaintRect: BoundingRect,scope: BrushScope,isLast: boolean) {} //渲染单个元素，调用元素内部预定义的brush方法
    refreshHover() {} //渲染遮罩层元素
    risize() {} //区域大小变化后重绘
    clear() {} //清除hover层外所有内容
}

Painter负责ZRender最繁重的部分——“绘图”的实现，从上文的代码可得知，Painter主要承担以下三方面的工作：

（1）负责Canvas及其周边DOM元素的创建与处理。

（2）负责调用各个Shape预定义好的brush方法进行绘制。

（3）提供基本的操作方法，渲染(_doPaintList、_doPaintEl)、刷新(refresh)、尺寸变化(resize)、擦除(clear)等。

绘制的具体过程如图3.4所示：

图3.4 ZRender元素绘制过程

Painter是调用canvas API实现的绘制，这些API包括颜色，渐变色，变换，矩阵变化，绘制图片、文本等。其中IE8使用exCanvas兼容。

3.4 Controller控制层（Handle.js）

Handler负责事件处理，事件类型包括'click', 'dblclick', 'mousewheel', 'mouseout', 'mouseup', 'mousedown', 'mousemove', 'contextmenu'。

class Handler extends Eventful {
    storage: Storage
    painter: PainterBase
    painterRoot: HTMLElement
    proxy: HandlerProxyInterface
    constructor(storage: Storage,painter: PainterBase,proxy: HandlerProxyInterface,painterRoot: HTMLElement) {}
    setHandlerProxy(proxy: HandlerProxyInterface) {}
    dispatch(eventName: HandlerName, eventArgs?: any)
    dispose() {}
    dispatchToElement(targetInfo: {target?: Element,topTarget?: Element}, eventName: ElementEventName, event: ZRRawEvent) {}
    mousemove(event: ZRRawEvent) {}
    mouseout(event: ZRRawEvent) {}
    click(event: ZRRawEvent) {}
    mousedown(event: ZRRawEvent) {}
    mouseup(event: ZRRawEvent) {}
    mousewheel(event: ZRRawEvent) {}
    dblclick(event: ZRRawEvent) {}
    contextmenu(event: ZRRawEvent) {}
}

canvas API没有提供监听画布元素的机制，使得用户的单击、拖动等鼠标事件无法判定作用在哪个元素上，这就需要一些处理：

以单击事件为例，处理的主要思路是：通过在Model层管理的元素列表中获取到每个元素的作用范围，判断点击坐标在哪个绘制元素的作用范围中，从而响应相关事件。若多个元素的作用范围都包含点击坐标，则返回level最高的元素。

按需开发ZRender新元素

本人在ZRender2.0版本（基于Javascript，最新版本基于TypeScript）的基础上进行了开发（代码地址:https://github.com/Heisenbilin/Srender），增加了画笔、视频等元素，并支持与前端交互式添加元素、支持元素的撤销、回溯等功能，并提供全部画布信息的结构化存储。

下面以视频元素为例，介绍ZRender中如何按需开发新元素。

4.1 为ZRender引入视频元素

1）Canvas中视频绘制原理

Canvas中可以使用ctx.drawImage(video, x, y,width,height)来对视频当前帧的图像进行绘制，其中video参数就是HTML5中的video标签。故我们可以通过Canvas的动态效果不断获取video当前画面，渲染到Canvas画布上。

在此基础上，我们可以通过改变原生video标签的属性，来对Canvas中绘制出的视频进行事件绑定与视频处理，完成对播放、进度条控制、图像处理等各类操作。

读者可以理解成：在Canvas中新建一个播放器，该播放器视频源是video标签创建，播放器的各种方法最终指向对video标签本身属性和方法的改变。在此基础上继续利用Canvas的强大功能，可以进行图像处理、弹幕加载等操作。

Canvas绘制视频的具体步骤：

第一步：创建video标签：

//创建Video标签
video = document.createElement('Video');
video.src = './video.ogv';
video.controls = true;
//将video标签插入dom结点，用于展示原始video。
var videodiv=document.getElementById('videodiv');
videodiv.appendChild(video);

第二步：Canvas中不断绘制video标签内容：

render()
function render() {
window.requestAnimationFrame(render)
ctx.clearRect(0, 0,canvas.width,canvas.height)
ctx.drawImage(video, 0, 0, width, height)  //绘制视频
}

2）ZRender添加视频Shape文件

在ZRender中添加新元素，可以结合3.2节中介绍的Model层原理来改写，该Video对象添加一个继承于Dispalyable抽象类的子类即可继承元素位置管理、变形、动画等共有属性与方法。

ZRender中默认支持Image元素，Video元素与Image元素类似，所以只需要对Image元素进行仿写，对Image元素的brush渲染方法进行修改：

Image元素brush核心渲染代码：

ctx.drawImage(image, x, y, width, height);

修改后的Video渲染代码：

render()
render: function(ctx,video) {
ctx.clearRect(x, y, width, height)
ctx.drawImage(video,x, y, width, height)
setTimeout(this.render.bind(this,ctx,video), 0)
},

在ZRender入口文件暴露出Video后，就可以往画布中添加Video元素：

var video = new zrender.Video({
style:{
videosrc:'./video.ogv',
width:600,
height:480
}
});
zr.add(video);

测试效果，如图4.1所示。

图4.1 通过ZRender绘制出的视频元素

这里添加的Video元素与其他元素一致，同样支持拖拽、放缩、事件添加等操作，将这些事件与Video标签提供的暂停、跳转等方法结合起来，还能实现对视频的播放、声音、图像等的控制。

ZRender开发总结

5.1 ZRender适用场景

基于ZRender对基础元素优雅且功能完备的封装、对DOM事件的一整套代理、对元素动画的高性能支持，开发者能够以舒适的姿态开发小型、中型、甚至大型应用，具体的适用场景如下：

1）小型应用

小型应用专注于利用ZRender进行前端的数据可视化，这部分应用的开发者仅需要知晓ZRender提供的部分API就可以进行前端数据可视化应用的快速开发，开发者不需要了解Canvas的底层渲染原理，只需要掌握基础的坐标系统，再通过元素创建、元素动画等API就可以在前端中创建出想要创建的图形效果，典型应用示例如下图5.1所示。

图5.1 ZRender小型应用示例

2）中型应用

基于ZRender开发的中型应用不仅要提供数据的可视化功能，还关注绘制出的图形与用户的交互，这与开发者在Echarts上开发交互式的前端图表的思路有些类似。ZRender不仅能服务于类似于Echarts这样的图表交互页面的开发，利用其提供的动画功能与交互功能还能用于2D小游戏开发、在线白板、交互式弹幕组件开发（如图10.12所示），交互式卡通模型等中型应用。

图5.2 交互式弹幕组件示例

利用ZRender开发中型应用，不需要对元素位置判定、DOM事件绑定与监听、给元素添加动画等功能进行重复开发，因为ZRender对这些既重要又难度大的工作已经做好了封装，开发者只需要熟练掌握这些API，就能达到“开箱即用、业务专注”的效果。

3）大型应用

基于ZRender开发的大型应用往往不满足于ZRender提供的现有功能，需要在源代码的基础上进行进一步开发以满足更丰富的底层API支持。另一方面，这些大型应用往往从业务角度出发，对底层API进行了进一步封装，为用户提供更便捷、交互性强的交互方案。最后，不同于中小型应用针对具体业务的开发，大型应用中ZRender将服务于整个平台和系统，需要与其他技术融合开发。

ZRender早期是为Echarts而生，Echarts也是ZRender使用最为广泛的大型应用，在Echarts中，开发者将ZRender提供的底层元素封装成了面向用户的图表元素，用户只输入配置就能实现前端数据可视化。但系统角度来看，Echarts的大部分工作也仅仅对ZRender元素进行了业务封装，对其他系统提供的借鉴意义较为一般。

ZRender另一个主流的大型应用开发方向是“在线编辑器”，在线编辑器包括协同白板、协同PPT设计、UI原型设计、图片编辑器等等。这些大型应用不仅需要对ZRender元素进行业务封装，还需要融合WebSocket、缓存、数据库、性能优化等多个技术，并且对于某些ZRender不支持的特定业务（例如白板画笔），开发者还需要对ZRender底层代码进行进一步开发。得益于第三章中介绍的清晰的代码逻辑和优雅的模块封装，利用ZRender开发大型应用比其他Canvas库更容易上手。

对在线编辑器开发感兴趣的读者可以参考Cicada在线流程图 (https://github.com/MarkMindCkm/cicada-flowchart) 工具与本人参与架构开发的在线图形绘制小工具 (https://github.com/Heisenbilin/Srender)。

5.2 ZRender开发注意事项

（1）ZRender对包围盒的功能支持欠缺：在线编辑器中，需要点击元素后显示出元素包围盒，以此判定是否选中该元素，并且该包围盒需要跟随元素进行拖拽与变形。但ZRender中提供的BoundingRect包围盒并不会随着包围盒内部元素的拖拽一起运动。这是因为ECharts中包围盒使用的很少，导致ZRender对包围盒的功能支持较为欠缺。

这个问题主要有两种解决方案，第一种方案是当点击事件触发后将元素与其包围盒封装成group，利用group特性共同拖拽与变形，并在失去焦点时删除包围盒Rect。另一种方案是根据需求重写BoundingRect以适应在线编辑器的包围盒需求。

（2）ZRedner不支持矩形内动态输入文字：在线编辑器中，经常需要进行文字实时录入，录入过程可描述为文本框创建与文字输入两部分，但ZRender并不支持矩形内动态输入文字。

若直接手写支持文字输入的文本框元素，是较大的工作量，且容易造成位置判定失败等冲突，建议用绝对定位的input标签悬停在输入框上方，只需要给文本框添加“创建悬停输入”事件就能实现，输入的数据再回传给画布进行渲染。

（3）ZRender无法胜任大型2D游戏引擎：这是由于ZRender中提供的基础元素适用于图表类应用，而大型2D游戏引擎一般需要更灵活完备的基础元素与更快速的渲染性能，开发2D游戏建议使用Unity等其他引擎。

参考文献

[1] Echarts官网, https://echarts.apache.org/examples/zh/index.html

[2] ZRender官网, https://ecomfe.github.io/zrender-doc/public/

[3] 腾讯文档在线PPT, https://docs.qq.com/home/product#ppt

[4] ExplanEverything在线白板, https://whiteboard.explaineverything.com/

[5] 《HTML5 Canvas开发详解》, SteveFulton, 2014

[6] 基于Canvas+Vue的视频弹幕组件, https://juejin.cn/post/6844903893848047630

[7] 使用Canvas处理图像与视频, https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

[8] ZRender绘制动画效果展示, https://ecomfe.github.io/zrender-doc/public/examples/particles.html

[9] Canvas2D过桥小游戏, https://animpen.com/pen/Y07mS6p7

[10] 2D可视化渲染引擎G, https://g.antv.vision/zh/docs/guide/introduce

[12] G2可视化引擎, https://g2.antv.vision/zh

[13] D3数据可视化库, https://d3js.org/