wx.createCanvasContext(canvasId, this)
注意事项：

# 微信小程序之canvas

# wx.createCanvasContext(canvasId, this)

用来创建画布。作为组件调用时，第二个参数为组件实例的this;

创建成功之后就相当于调用了一次 beginPath();

# ctx.save()

保存save之前的绘图的上下文状态；

# ctx.restore()

恢复之前保存的绘图上下文（比如之前的颜色，缩放大小等，恢复了之后save保存的状态就没了）

# grd=ctx.createLinearGradient()

参数：x0,y0,x1,y1（起点的X坐标，起始的Y坐标，终点的X坐标，终点的Y坐标）

创建一个线性渐变的颜色，需要使用addColorStop()来指定渐变点，至少要两个。

# ctx.textAlign='left | center |right'

设置文字基于x坐标的水平对齐方(把X坐标当做左侧 | 把X坐标当做中间 | 把X坐标当做右侧)

# ctx.textBaseline='top | bottom | middle | normal';

设置文字基于Y坐标的垂直对齐方式（把Y坐标当做顶部 | 把Y坐标当做底部 | 把Y坐标当做中间 | 底部紧贴Y坐标）

# ctx.font='normal bold 26px PingFangSC-Regular'

设置当前字体样式的属性

字体样式：仅支持italic, oblique, normal
字体粗细：仅支持 normal, bold
字体大小(单位PX)
字体族名。注意确认各平台所支持的字体

# ctx.fillStyle='#ffffff';

设置填充色（默认为black）

# ctx.fillText(text，x，y，maxWidth)

在画布上绘制被填充的文本。

text：要绘制的文字
x：绘制文本的左上角x坐标位置
y：绘制文本的左上角y坐标位置
maxWidth：需要绘制的最大宽度，可选

# ctx.fillRect(x，y，width，height)

绘制填充一个矩形

x：矩形路径左上角的x坐标
y：矩形路径左上角的y坐标
width：矩形路径的宽度
height：矩形路径的高度

# ctx.arc(x，y，r，sAngle，eAngle，counterclockwise)

TIP

绘制圆形，调用arc之前最好先调下beginPath，调用后最好调用下 closePath闭合一下路径，不然会和下次画的圆连在一起

x：圆心横坐标
y：圆心纵坐标
r：圆的半径
sAngle：起始弧度，单位弧度（在3点钟方向）
eAngle：终止弧度
counterclockwise：可选，指定弧度方向（默认false，顺时针）

# ctx.fill();

对当前路径中的内容进行填充。默认的填充色为黑色。

如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充，

# ctx.drawImage(src，x，y，dWidth，dHeight，sx，sy，sWidth，sHeight)

绘制图像到画布。

src：所要绘制的图片资源
x：图像的左上角在目标canvas上 X 轴的位置
y：图像的左上角在目标canvas上 Y 轴的位置
dWidth：在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
dHeight：在目标画布上绘制图像的高度，允许对绘制的图像进行缩放
sx：源图像的矩形选择框的左上角 X 坐标
sy：源图像的矩形选择框的左上角Y 坐标
sWidth：源图像的矩形选择框的宽度
sHeight：源图像的矩形选择框的高度

# ctx.translate(x,y)

TIP

对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。（使用之前一定要save一下）

x：水平坐标平移量
y：竖直坐标平移量

# ctx.rotate(rotate)

TIP

以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。

rotate：旋转角度，以弧度计(degrees * Math.PI/180；degrees范围为0~360)

# wx.canvasToTempFilePath(obj, this)

TIP

把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <canvas/> 组件

x：画布x轴起点（默认0）
y：画布y轴起点（默认0）
width：画布宽度（默认为canvas宽度-x）
height：画布高度（默认为canvas高度-y）
canvasId：画布标识，传入 <canvas/> 的 canvas-id
success：接口调用成功的回调函数
fail：接口调用失败的回调函数

# 注意事项：

1、所有图片绘制完成之后才能ctx.draw();

圆型图片绘制clip前要先beginPath，而且必须是在背景图已经绘制完成的回调函数中进行

← 微信小程序的坑