8.7.5 绘画

在上一章的最后，我们简单介绍了画布组件，并且在例子中演示了其使用方法。在这一节里我们会更加仔细的介绍小程序为帮助我们使用画布组件而提供的API。

Canvas的坐标系：画布组件（canvas）处于二维的网格当中，使用坐标（x，y）来表示位置。规定左上角的坐标为（0，0），越向右x的值越大，越向下y的值越大。

获取context对象

绘图的第一步：创建一个Canvas绘图的上下文，也就是绘图的场景。具体方法有：

1. wx.createCanvasContext(canvasId) 创建canvas绘图上下文（指定 canvasId）。
2. wx.createContext (不推荐使用) 创建并返回绘图上下文。
3. drawCanvas (不推荐使用) 用所提供的actions在所给的canvas-id对应的canvas上进行绘图。
4. canvasToTempFilePath(OBJECT) 把当前画布的内容导出生成图片，并返回文件路径。

颜色，样式，阴影

1. setFillStyle 设置填充色。
2. setStrokeStyle 设置边框颜色。
3. setShadow 设置阴影样式。

渐变

1. createLinearGradient 创建一个线性的渐变颜色。
2. createCircularGradient 创建一个圆形的渐变颜色。
3. addColorStop 创建一个颜色的渐变点。

矩形

1. rect 创建一个矩形，需要用 fill() 或者 stroke() 方法将矩形真正的画到 canvas 中。
2. fillRect 填充一个矩形。
3. strokeRect 画一个矩形(非填充)。
4. clearRect 清除画布上在该矩形区域内的内容。

线条样式

1. setLineWidth 设置线条的宽度。
2. setLineCap 设置线条的端点样式。
3. setLineJoin 设置线条的交点样式。
4. setMiterLimit 设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。

路径

1. fill 对当前路径中的内容进行填充。
2. stroke 画出当前路径的边框。
3. beginPath 开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。
4. closePath 关闭一个路径，关闭路径会连接起点和终点。
5. moveTo 把路径移动到画布中的指定点，不创建线条。
6. lineTo 增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke() 方法来画线条。
7. arc 画一条弧线。
8. quadraticCurveTo 创建二次贝塞尔曲线路径。
9. bezierCurveTo 创建三次方贝塞尔曲线路径。

变形

1. scale 在调用scale方法后，之后创建的路径其横纵坐标会被缩放。
2. rotate 以原点（默认为（0，0））为中心，顺时针旋转当前坐标轴。
3. translate 对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。

文字与图片

1. setFontSize 设置字体的字号。数字越大，字体越大。
2. fillText 在画布指定位置绘制被填充的文本。
3. drawImage 绘制图像，图像源可以是本地图片或网络图片。

其他

1. setGlobalAlpha 设置全局画笔透明度。
2. save 保存当前的绘图上下文。
3. restore 恢复之前保存的绘图上下文。
4. draw 将之前在绘图上下文中的描述（路径、变形、样式）画到canvas中。绘图上下文需要由wx.createCanvasContext(canvasId)来创建。
5. getActions (不推荐使用) 返回绘图上下文的绘图动作。
6. clearActions (不推荐使用) 清空绘图上下文的绘图动作。

在大多数的情况下，我们只需要使用小程序为我们提供的组件即可达成需求，真正需要我们自己去绘图的情况比较少，所以这里只罗列了绘图API的所有方法，具体参数以及使用方法请查阅官方文档。