- CanvasContext.beginPath()
官方描述:
- 在最开始的时候相当于调用了一次 beginPath。
- 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置,以最后一次设置为准。
意思就是每一个setFillStyle、setStrokeStyle、setLineWidth前面都要加CanvasContext.beginPath(),不然的话就会踩坑
- CanvasContext.save()和CanvasContext.restore()
save表示保存save函数之前的状态,restore表示获取save保存的状态
const ctx = wx.createCanvasContext('canvas')
ctx.save() //save保存了上文的状态
ctx.setFillStyle('red')
ctx.scale(2, 2)
ctx.fillRect(10, 10, 150, 100) // 该矩形是红色的
ctx.restore() //restore获取了save保存的状态,所以此时填充的颜色是黑色并不是红色,scale方法也仅仅对红色矩形生效,并不会对黑色矩形起任何效果
ctx.fillRect(50, 50, 150, 100) // 该矩形是黑色的
ctx.draw()
- wx.canvasToTempFilePath()
必须在CanvasContext.draw()的回调里调用该方法才能保证导出图片成功
- CanvasContext.rect()和CanvasContext.fillRect()
- CanvasContext.fillRect()是填充一个矩形,简言之就是给矩形添加颜色
- CanvasContext.rect()创建一个矩形路径
如果只是需要给矩形添加背景颜色则使用CanvasContext.fillRect()方法,CanvasContext.rect()会遮盖元素。
- CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
- number x表示圆心的 x 坐标
- number y表示圆心的 y坐标
- number r表示圆的半径
- number sAngle表示起始弧度,单位弧度(在3点钟方向)
- number eAngle表示终止弧度
- boolean counterclockwise表示弧度的方向是否是逆时针