html样式

<canvas canvas-id="progress" style="width: 100rpx; height: 100rpx;"></canvas>

canvas

1.创建canvas2.清理画布，开始，结束...3.样式设置4.圆5.贝塞尔曲线6.填充7.绘制

1.创建canvas

const PI = Math.PI圆周率const context = wx.createCanvasContext(name)创建 canvas 的绘图上下文 CanvasContext 对象, name为 canvas标签内 canvas-id 的值

2.清理画布，开始，结束…

context.clearRect(x1,y1,x2,y2)清除画布上在该矩形区域内的内容, (x1,y1)左上角、 (x2,y2)右下角context.beginPath()开始创建一个路径context.closePath()关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染context.save()保存绘图上下文context.restore()恢复之前保存的绘图上下文context.clip()从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。

3.样式设置

context.setStrokeStyle("#FFE9E9")设置矩形线条的颜色，如果没设置默认是黑色context.setLineWidth(6)设置线条的宽度，单位pxcontext.setLineCap(‘round’)设置线条的端点样式context.setFillStyle(’#F8782E’)设置填充色context.setFontSize(20)设置字体的字号context.setTextAlign(‘center’)设置文字的对齐context.scale (0.5, 0.5)在调用后，之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘

4.圆

context.arc(x1, y1, r,起始弧度, 终止弧度, 顺/逆时针)创建一个圆， (x1，y1)圆心、r,半径context.arcTo(x1, y1, x2, y2, r)根据控制点和半径绘制圆弧路径, (x1，y1)点1、(x2，y2)点2，r,半径发现1context.arcTo 之前必须有一个 context.lineTo/context.moveTo 否则不显示发现1.1context.lineTo/context.moveTo 为 起始点，发现1.1context.arcTo 中 (x1，y1)点1，(x2，y2)点2 为圆弧的两点，大致可以看为 起始点 和 点1 两点确定一条直线 l1， 经过 点2 延申的线 l2 垂直相交与 l1 且 l1、 l2 为圆弧的切线，发现1.2l1 和 l2 垂直相交形成一个坐标系，那么 点1 和 点2中的 x1 、x2 决定是在x轴的正轴上还是负轴上，同理y1、y2

5.贝塞尔曲线

context.bezierCurveTo(x1, y1, x2, y2, x3, y3)创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点,(x1，y1)点1、(x2，y2)点2、(x3，y3)点3

6.填充

context.fill()对当前路径中的内容进行填充context.fillRect(x1, y1,w,h)填充一个矩形,（x1,y1）左上角的位置，w,宽度， h, 高度context.fillText(‘已领’, x1, y1)在画布上绘制被填充的文本, (x1，y1)左上角context.stroke()画出当前路径的边框

7.绘制

context.draw()将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中context.drawImage(img, dx, dy)绘制图像到画布, （dx, dy）为图像在画布上的左顶点，这是图像全部显示且不缩放context.drawImage(img, dx, dy, dw, dh)（dw, dh）为图像在画布上的大小，这是图像全部显示，但会缩放context.drawImage(img, x1, y1, w1, h1, dx, dy, dw, dh)（x1,y1）为裁剪图像的起始点，也是裁剪后图像的左顶点， （w1,h1）为裁剪图像的宽度和高度，这是图像不全部显示且会缩放

引用 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.draw.html