quark renderer开篇一

2021SC@SDUSC

Quark-Renderer是一款轻量且强大的Canvas渲染引擎，从ZRender改进而来。它支持多种环境，对于微信小程序开发、node、浏览器环境等都有不错的支持。

Quark Renderer 强大的补间算法不仅仅可以对位置、尺寸进行补间，对颜色、字符串也可以进行补间，这是同类技术中比较特殊的。

Quark Renderer 的接口简单而统一，所有图元的配置项都是完全一致的。只要熟悉其中一个，就熟悉了所有，学习成本非常低，极易上手，对开发者友好。作为开篇，今后主要研究Quark-Renderer。

以上主要是官网对于Quark-Renderer的介绍，该节主要介绍Quark-renderer的环境配置和使用。

简单而言，Quark-Renderer是一个可以用来做图像的工具，只要导入相应的包文件，进行相应的配置，就可以直接使用，其效果跟ECharts类似。但是他需要一定的环境搭建，下面主要介绍如何搭建环境。

首先，打开网址quark-renderer: 一款轻量且强大的 Canvas(&SVG) 渲染引擎，从 ZRender 改进而来。，从git上将开源文件下载下来，如图

下载后解压，然后用编辑器打开这个文件夹，由于该文件是没有进行处理的，需要将其处理，才能使用，这时候对于一些案例都无法使用。

我用的是webstrom编辑器，然后打开文件。先要安装nodejs，因为需要用到npm进行安装相关依赖。如何确定自己是否已经安装好node，在cmd中输入node --version，如图

显示自己的node版本号即安装成功。

而后有了node以后我们就可以给之前下载的文件加载依赖，使用npm install ，进行安装加载

然后需要进行运行编译，在terminal中输入 npm run-script build，回车运行，

这样项目就编辑完成了，而后你可以点击test目录下的文件进行运行，这样就能运行一些之前已经编辑好的html文件。

这些文件就可以在浏览器上进行运行，不信你可以试试。

这是第一个html文件的运行结果，是一个球体的运动。

而后是一些典型的运行结果

等等，这些示例都是开源文件中自带的，由于图片没有动画效果，想要了解详情的可以自己动手试试。

这期主要介绍一下quark-renderer的背景、配置过程以及还有示例展示，下期我将会更新具体代码的内容。

最后再补充一点小组分工，我主要阅读的源代码部分是canvas内容部分以及一些其他的代码，以后主要阅读canvas等的代码，其中可能会参杂quark-renderer的一些其他方面的内容。