小程序canvas生成图片踩坑日记

• CanvasContext.beginPath()
  官方描述：

1. 在最开始的时候相当于调用了一次 beginPath。
2. 同一个路径内的多次 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()

1. CanvasContext.fillRect()是填充一个矩形，简言之就是给矩形添加颜色
2. CanvasContext.rect()创建一个矩形路径
   如果只是需要给矩形添加背景颜色则使用CanvasContext.fillRect()方法，CanvasContext.rect()会遮盖元素。

• CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)

1. number x表示圆心的 x 坐标
2. number y表示圆心的 y坐标
3. number r表示圆的半径
4. number sAngle表示起始弧度，单位弧度（在3点钟方向）
5. number eAngle表示终止弧度
6. boolean counterclockwise表示弧度的方向是否是逆时针