- CanvasContext.beginPath()
官方描述:
- 在最開始的時候相當于調用了一次 beginPath。
- 同一個路徑內的多次 setFillStyle、setStrokeStyle议惰、setLineWidth等設置,以最后一次設置為準待错。
意思就是每一個setFillStyle褐澎、setStrokeStyle会钝、setLineWidth前面都要加CanvasContext.beginPath(),不然的話就會踩坑
- CanvasContext.save()和CanvasContext.restore()
save表示保存save函數(shù)之前的狀態(tài)工三,restore表示獲取save保存的狀態(tài)
const ctx = wx.createCanvasContext('canvas')
ctx.save() //save保存了上文的狀態(tài)
ctx.setFillStyle('red')
ctx.scale(2, 2)
ctx.fillRect(10, 10, 150, 100) // 該矩形是紅色的
ctx.restore() //restore獲取了save保存的狀態(tài)迁酸,所以此時填充的顏色是黑色并不是紅色,scale方法也僅僅對紅色矩形生效俭正,并不會對黑色矩形起任何效果
ctx.fillRect(50, 50, 150, 100) // 該矩形是黑色的
ctx.draw()
- wx.canvasToTempFilePath()
必須在CanvasContext.draw()的回調里調用該方法才能保證導出圖片成功
- CanvasContext.rect()和CanvasContext.fillRect()
- CanvasContext.fillRect()是填充一個矩形奸鬓,簡言之就是給矩形添加顏色
- CanvasContext.rect()創(chuàng)建一個矩形路徑
如果只是需要給矩形添加背景顏色則使用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表示弧度的方向是否是逆時針
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者