官方文档很重要，但对于初学者来说可能会有点懵。因为官方文档主要讲解api的用法，第一次接触的工友可能不是那么容易将各个知识点串联起来。

本文在基于官方案例的基础上，把我觉得入门必学的知识点过一遍，然后串起来搞一个小特效。

要快速学习一个库，尤其是可视化方面的库，最快速的方法是找到一个好教程，然后跟着敲代码，建立自己的 “demo仓库” 。

是个 创意编程程式库，其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何人！ 是个免费及开源的软件因为我们相信所有人都应该能自由使用软件及用于学习软件的工具。

使用绘图的比喻并有一副完整的绘画功能。除此之外，您也不单限于您的绘图画布。您可以将您整个浏览器页面当作您的绘图，这包括了 物件，如文字、输入框、视频、摄像头及音频。

是 往浏览器延伸的一个 。 是使用 编写的，而 对于从事艺术工作的工友来说上手是有点难度的。

浏览器暂时只接受 、 和 ，如果能将 直接搬上浏览器运行的话，对于艺术家来说是大大的好事。于是， 应运而生！

我使用的开发工具是 ，并装了 Live Server 插件[4]。这个插件可以帮我们快速启动一个服务端运行当前页面，并具备热更新的能力。启动完服务，在浏览器运行指定页面后，你代码的每一次保存，浏览器都会自动刷新。

: 同样可以理解为 的一个生命周期，在这函数里的代码会以 60帧每秒 的速度执行。

: 创建画布的方法，这个方法是 在全局创建的，传入画布的宽高后， 会自动在页面的最后插入一个 元素。

“有声明” 的意思是这个世界有生物，生物无时无刻都在活动。而活动的过程是放在 函数里。

和 这两个函数非常重要，在前端的世界里，你可以把 和 理解为生命周期函数。

是 里一个很重要的方法，你可以简单的理解为 是 里的一个生命周期函数。在该函数里可以做很多初始化工作，比如创建画布并设置大小、画布背景色等。

每秒执行次数受到 影响， 默认每秒60帧。如果需要修改帧率，可以直接传入指定数值，比如 。

可以绘制 2D 和 3D 图形，但在光速入门阶段只会讲解 2D 图形的基础用法。

上面的例子中，画布的宽高是200像素，点在 的位置，仔细看可以发现点出现在画布的中心。

三角形有3个点，每个点需要用2个坐标(x和y)来描述，所以 一共要传入6个参数。

经过前面的 点(point) 和 线段(line) 练习，相信你看到三角形的参数名称就已经知道什么意思了。

、、、 是用来设置正方形的圆角半径，分别是 、、、。如果不传这几个参数，正方形的角默认是90°（直角）。

意思是，如果只传入1个半径值，那么后面3个圆角半径的值会取左上的圆角半径。

前面了解完 正方形(quad) 如何创建后，学习 矩形(rect) 会觉得非常简单。

如果传4个参数的话，就可以分别设置长和宽了，第3和第4个参数分别是 和 。

后面的4个参数 、、、 分别设置四个角的圆角半径，不设置的线°。用法和正方形一样的，自己动手试试看吧~

上面代码的意思：圆心在 (80, 80) 的位置，直径是 100。换算一下半径就是50咯。

使用 可以创建椭圆，椭圆(ellipse) 的创建方法和 矩形(rect) 其实是有点像的。

弧形(arc) 是一个很好玩的方法，你可以用 画圆形、椭圆、饼图和弧线。

: 定义弧形的画法。可选值：开放式半圆形（OPEN），封闭式半圆形（CHORD），封闭式饼形段（PIE）

我知道有很些工友对弧度制不太熟悉，其实也不需要担心， 提供了 方法，可以将角度转成弧度。

除了前面讲到的几个基础图形， 还提供了贝塞尔曲线、球体、立方体、圆锥等图形元素，甚至还能自定义多边形。

但在光速入门阶段我们只需掌握基础的图形，再加上自己的创意就可以做出很漂亮的作品。

先说 ，这个参数是控制文本在 轴方向的展示长度， 就可以得出这段文字在 轴方向可以展示的长度。

比如一个字符的宽度是 ， 设为10， 设为20，那么一行就可以展示2个文字。

但 并不能很好的控制文本长度，它只会判断这行文本里有没有空格，如果出现空格，且超出文本框宽度的内容就会换行。

得出的长度就是y轴方向可展示的区域。超出这个区域的文本都不会展示出来了。

使用 和 前，要设置颜色模式，告诉 要使用哪种颜色模式去渲染。而 就省略了这步。和 第1个参数取值 ，第2和第3个参数取值是 。而 前3个参数的取值都是 。

灰度模式的取值范围是 。0表示黑色，255表示白色，中间的其他值表示不同程度的灰色。

使用 设置颜色，需要传 3 ~ 4 个参数，而使用灰度模式只需传1个参数。

还可以写在 里，每次刷新画布都可以设置画布背景色。写在 里，画布每次刷新都会重新设置一次背景色。某些情况下是很有用的，比如移动图像时，如果背景色没重新设置一次，那么图形移动后会产生“残留”的现象。这个放在动画章节说。

需要注意的是，一旦设置了 ，在它后面创建的图形都会使用相同的填充色，正如上面的例子那样。

不填充的情况下，图形内部将会设置成透明，会直接显示在它下层的颜色，如果它下层没有其他元素，则会直接显示背景色。

创建出来的元素默认是有一个黑色边框，如果想要修改边框颜色，可以使用 方法。

和 一样，在使用 设置完颜色之后的图形都会使用这个边框颜色。如果要再次修改边框颜色，只需再次使用 即可。

关于文字的样式，前面说到的 、、 方法都可以对文字的填充色、描边等样式进行设置。自己动手试试吧~

可以强制程序等待，直到 函数内的资源加载完成或者事件执行完再执行其他代码。

本例使用 判断用户是否点击了鼠标，点击鼠标时画布背景是蓝色，松开鼠标后画布背景是橙色

函数在页面运行时会一直执行，所以 写在 里可以被捕捉到。如果用户点击鼠标，且被捕捉到 时， 会返回 。

如果没重新设置背景色的话，上一帧的圆会保留下来。很多时候保留上一帧的数据会产生不错的艺术作品。