和直接使用WebGL相比，比如着色器，大部分情况下你无需自己开发，不过，情况并不总是这样，如果你的需求太过特殊，我们依旧可以用更接近原生的方式来绘制，这是一个非常友好的设计。

这里，我们将向大家演示WebGL的一些朴素说明和基本使用，即使你后续使用第三方3D渲染引擎进行绘制，这里的基本概念依旧是非常有益的，或者说是必要的。

最终的效果如右边所示（你可以使用鼠标、手指或者键盘来控制这个机器人的旋转）：本项目基于image3D实现。在正式开始之前，我们需要准备好模型数据，你可以去这里下载：model.json如果想快速体验最终效果，可以点击此处查看。着色器首先，你需要准备好两个着色器。顶点着色器 {代码...} 片段着色器 {代码...} 画布也就是...

什么时候可能会需要解析类似这样的字符串？比如你可能希望的nodejs环境开发一个爬虫，分析爬到的页面内容，或者是像上面的设计，用html来表达希望绘制什么样的图形后通过js在canvas画布上绘制出用户的意图等。

环形图假设我们现在有一组数据： {代码...} 我们希望采用环形图来显示，最终的效果如下：单一的情况我们先不考虑边缘的提示文字和折线，只考虑中间的环形如何绘制。首先，我们需要求解出数值的和，这样才能会绘制的时候知道每个环的占比： {代码...} 现在，就可以通过循环的方式一个个绘制圆环了： {代码...} 具体代码请...

在演示的时候和说明的时候，虽然我们选择基于image2D.js来作为依赖库，但由于其朴素的语法几乎和原生canvas或者说和普通人的认知是一致的，因此我们认为这不是一个糟糕的选择。

提出问题对于一段正则表达式，如果内容比较多，比如下面的例子： {代码...} 虽然很简单，不过很难快速直观的解读，如果是下面的效果：很显然，一下子就可以知道，199y是可以被匹配的。实现思路那么，我们是如何实现的？分析单词首先，我们需要把正则表达式切割成一个个的单词，按照下面的算法： {代码...} 得到的结果是...

uni-app我们提供的是一个uni-app组件，引入以后需要进行注册： {代码...} 注册完毕就可以在页面中使用了： {代码...} 温馨提示：上面的宽、高属性支持常见的运算，除了数字外，还支持px、vh、vw和rpx等单位。最后，启动绘图： {代码...} 温馨提示：seriesList可选，表示绘图中除了基本的内置组件外使用到的自定义组件！...

你可能认为画笔会更新至少三次，而实际情况是，只刷新了一次。因此，你在改变数据的时候，无需过多的考虑刷新的问题，框架内部会在保证"立刻刷新"的情况下自动减小刷新频率。