canvasContext

功能說明： canvas組件的繪圖上下文。 CanvasContext是舊版的接口，新版Canvas 2D接口與Web一致。

内容說明

内容	類型	說明
fillStyle	String	填充顏色。用法同CanvasContext.setFillStyle()
strokeStyle	String	邊框顏色。用法同 CanvasContext.setStrokeStyle()
font	String	當前字體樣式的内容。符合CSS font語法的DOMString字串，至少需要提供字體大小和字體族名。預設值為10px sans-serif。CSS font
globalCompositeOperation	String	在繪製新形狀時，應用的合成操作的類型。現時Android版本只適用於fill填充塊的合成，用於stroke線段的合成效果都是source-over。現時支持的操作有： 1.Android：xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light 2. iOS：xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity

shadowOffsetX	Number	陰影相對於形狀在水准方向的偏移
shadowOffsetY	Number	陰影相對於形狀在豎直方向的偏移
shadowColor	Number	陰影的顏色
shadowBlur	Number	陰影的模糊級別
lineWidth	Number	線條的寬度，用法同CanvasContext.setLineWidth()
lineCap	String	線條的端點樣式，用法同 CanvasContext.setLineCap()
lineJoin	String	線條的交點樣式，用法同 CanvasContext.setLineJoin()
miterLimit	Number	最大斜接長度，用法同 CanvasContext.setMiterLimit()
lineDashOffset	Number	虛線偏移量，初始值為0
globalAlpha	Number	全域畫筆透明度，範圍0-1，0表示完全透明，1表示完全不透明

lineJoin的合法值
值說明
bevel 斜角
round 圓角
miter 尖角

值	說明
bevel	斜角
round	圓角
miter	尖角

方法集

arc

TIP

該API使用方法為： CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)

功能說明： 創建一條弧線，圓的創建可以指定起始弧度為0，終止弧度為2 * Math. PI。用stroke或者fill方法來在canvas中畫弧線。
參數及說明：
- number x: 圓心的x座標；
- number y: 圓心的y座標；
- number r: 圓的半徑；
- number sAngle: 起始弧度，單位弧度（在3點鐘方向）；
- number eAngle: 終止弧度；
- number counterclockwise: 弧度的方向是否是逆時針。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()

ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

ctx.setFontSize(12)
ctx.setFillStyle('black')
ctx.fillText('0', 165, 78)
ctx.fillText('0.5*PI', 83, 145)
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*PI', 83, 10)

// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()

ctx.draw()

針對arc（100，75，50，0，1.5 * Math.PI）的三個關鍵座標如下：

綠色：圓心（100，75）

紅色：起始弧度（0）

藍色：終止弧度（1.5 * Math.PI）

arcTo

TIP

該API使用方法為： CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)

功能說明： 根據控制點和半徑繪製圓弧路徑
參數及說明：
- number x1: 第一個控制點的x軸座標；
- number y1: 第一個控制點的y軸座標；
- number x2: 第二個控制點的x軸座標；
- number y2: 第二個控制點的y軸座標；
- number radius: 圓弧的半徑。

draw

TIP

該API使用方法為： CanvasContext.draw(boolean reserve, function callback)

功能說明： 將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到canvas中。
參數及說明：
- boolean reserve：本次繪製是否接著上一次繪製。即reserve參數為false，則在本次調用繪製之前native層會先清空畫布再繼續繪製；若reserve參數為true，則保留當前畫布上的內容，本次調用drawCanvas繪製的內容覆蓋在上面，默認false。
- function callback：繪製完成後執行的回呼函數
示例代碼： 第二次draw（）reserve為true，所以保留了上一次的繪製結果，在上下文設定的fillStyle 'red'也變成了默認的'black'。

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw(true)

drawImage

TIP

該API使用方法為： CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)

功能說明： 繪製影像到畫布
參數及說明：
- string imageResource, 所要繪製的圖片資源（網絡圖片要通過getImageInfo / downloadFile先下載）；
- number sx，需要繪製到畫布中的imageResource的矩形選擇框的左上角x座標；
- number sy，需要繪製到畫布中的imageResource的矩形選擇框的左上角y座標；
- number sWidth,需要繪製到畫布中的imageResource的矩形選擇框的寬度；
- number sHeight，需要繪製到畫布中的imageResource的矩形選擇框的高度；
- number dx，imageResourceimageResource的左上角在目標canvas上x軸的位置；
- number dy，imageResourceimageResource的左上角在目標canvas上y軸的位置；
- number dWidth，在目標畫布上繪製imageResource的寬度，允許對繪製的imageResource進行縮放；
- number dHeight，在目標畫布上繪製imageResource的高度，允許對繪製的imageResource進行縮放。
示例代碼：
- drawImage(imageResource, dx, dy)
- drawImage(imageResource, dx, dy, dWidth, dHeight)
- drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
  success(res) {
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
  }
})

createLinearGradient

TIP

該API使用方法為： CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)

功能說明： 創建一個線性的漸變顏色。返回的CanvasGradient對象需要使用 CanvasGradient.addColorStop() 來指定漸變點，至少要兩個。
參數及說明：
- number x0: 起點的x座標；
- number y0: 起點的y座標；
- number x1: 終點的x座標；
- number y1: 終點的y座標。
返回值： CanvasGradient
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

createCircularGradient

TIP

該API使用方法為： CanvasGradient CanvasContext.createCircularGradient(number x, number y, number r)

功能說明： 創建一個圓形的漸變顏色。起點在圓心，終點在圓環。返回的CanvasGradient對象需要使用 CanvasGradient.addColorStop() 來指定漸變點，至少要兩個。
參數及說明：
- number x: 圓心的x座標；
- number y: 圓心的y座標；
- number r: 圓的半徑；
返回值： CanvasGradient
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

createPattern

TIP

該API使用方法為： CanvasContext.createPattern(string image, string repetition)。

功能說明： 對指定的影像創建模式的方法，可在指定的方向上重複元影像。
參數及說明：
- string image，重複的影像源，支持代碼包路徑和本地臨時路徑（本地路徑）。
- string repetition, 何重複影像，repetition的合法值如下：
  合法值說明
  repeat 水准豎直方向都重複
  repeat-x 水准方向重複
  repeat-y 豎直方向重複
  no-repeat 不重複
示例代碼：

合法值	說明
repeat	水准豎直方向都重複
repeat-x	水准方向重複
repeat-y	豎直方向重複
no-repeat	不重複

    const ctx = wx.createCanvasContext('myCanvas')
    const pattern = ctx.createPattern('/path/to/image', 'repeat-x')
    ctx.fillStyle = pattern
    ctx.fillRect(0, 0, 300, 150)
    ctx.draw()

measureText

TIP

該API使用方法為： Object CanvasContext.measureText(string text)

功能說明： 量測文字尺寸資訊。現時僅返回文字寬度，同步接口。
參數及說明：
- string text 要量測的文字。
  内容類型說明
  width number 文字的寬度
示例代碼：

内容	類型	說明
width	number	文字的寬度

 const ctx = wx.createCanvasContext('myCanvas')
 ctx.font = 'italic bold 20px cursive'
 const metrics = ctx.measureText('Hello World')
 console.log(metrics.width)

save

TIP

該API使用方法為： CanvasContext.save()

功能說明： 保存繪圖上下文。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

// save the default fill style
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)

// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)

ctx.draw()

restore

TIP

該API使用方法為： CanvasContext.restore()

功能說明： 恢復之前保存的繪圖上下文。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

// save the default fill style
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)

// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)

ctx.draw()

beginPath

TIP

該API使用方法為： CanvasContext.beginPath()

功能說明： 開始創建一個路徑。需要調用fill或者stroke才會使用路徑進行填充或描邊。
- 在最開始的時候相當於調用了一次beginPath。
- 同一個路徑內的多次setFillStyle、setStrokeStyle、setLineWidth等設定，以最後一次設定為准。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

closePath

TIP

該API使用方法為： CanvasContext.closePath()

功能說明： 關閉一個路徑。會連接起點和終點。如果關閉路徑後沒有調用fill或者stroke並開啟了新的路徑，那之前的路徑將不會被渲染。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.closePath()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

moveTo

TIP

該API使用方法為： CanvasContext.moveTo(number x, number y)

功能說明： 把路徑移動到畫布中的指定點，不用創建線條，利用stroke方法來畫線條
參數及說明：
- number x，目標位置的x座標
- number y，目標位置的y座標
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)

ctx.moveTo(10, 50)
ctx.lineTo(100, 50)
ctx.stroke()
ctx.draw()

lineTo

TIP

該API使用方法為： CanvasContext.lineTo(number x, number y)

功能說明： 新增一個新點，然後創建一條從上次指定點到目標點的線，用stroke方法來畫線條。
參數及說明：
- number x，目標位置的x座標
- number y，目標位置的y座標
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()

quadraticCurveTo

TIP

該API使用方法為： CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)

功能說明： 創建二次貝塞爾曲線路徑。曲線的起始點為路徑中前一個點。
參數及說明：
- number cpx，貝塞爾控制點的x座標；
- number cpy，貝塞爾控制點的y座標；
- number x，結束點的x座標；
- number y，結束點的y座標。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()

針對moveTo（20，20）quadraticCurveTo（20，100，200，20）的三個關鍵座標如下：

紅色：起始點（20，20）

藍色：控制點（20，100）

綠色：終止點（200，20）

bezierCurveTo

TIP

該API使用方法為： CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)

功能說明： 創建三次方貝塞爾曲線路徑。曲線的起始點為路徑中前一個點。
參數及說明：
- number cp1x，第一個貝塞爾控制點的x座標
- number cp1y，第一個貝塞爾控制點的y座標
- number cp2x，第二個貝塞爾控制點的x座標
- number cp2y，第二個貝塞爾控制點的y座標
- number x，結束點的x座標；
- number y，結束點的y座標。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.arc(200, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(150, 75)

ctx.moveTo(200, 20)
ctx.lineTo(200, 100)
ctx.lineTo(70, 75)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()

針對moveTo（20，20）bezierCurveTo（20，100，200，100，200，20）的三個關鍵座標如下：

紅色：起始點（20，20）
藍色：兩個控制點（20，100）（200，100）
綠色：終止點（200，20）

rect

TIP

該API使用方法為： CanvasContext.rect(number x, number y, number width, number height)

功能說明： 創建一個矩形路徑，需要用fill或者stroke方法將矩形真正的畫到canvas中。
參數及說明：
- number x，矩形路徑左上角的橫坐標；
- number y，矩形路徑左上角的縱坐標；
- number width，矩形路徑的寬度；
- number height，矩形路徑的高度。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

clip

TIP

該API使用方法為： CanvasContext.clip()

功能說明： 從原始畫布中剪切任意形狀和尺寸，一旦剪切了某個區域，則所有之後的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其他區域），可以在使用clip方法前通過使用save方法對當前畫布區域進行保存，並在以後的任意時間通過restore方法對其進行恢復。
參數及說明：
- number x，矩形路徑左上角的橫坐標；
- number y，矩形路徑左上角的縱坐標；
- number width，矩形路徑的寬度；
- number height，矩形路徑的高度。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

wx.downloadFile({
  url: '',
  success(res) {
    ctx.save()
    ctx.beginPath()
    ctx.arc(50, 50, 25, 0, 2 * Math.PI)
    ctx.clip()
    ctx.drawImage(res.tempFilePath, 25, 25)
    ctx.restore()
    ctx.draw()
  }
})

stroke

TIP

該API使用方法為： CanvasContext.stroke()

功能說明： 畫出當前路徑的邊框。默認顏色為黑色。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.draw()

stroke（）描繪的路徑是從beginPath（）開始計算，但是不會將strokeRect（）包含進去。

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setStrokeStyle('yellow')
ctx.stroke()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only stoke this rect, not in current path
ctx.setStrokeStyle('blue')
ctx.strokeRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will stroke current path
ctx.setStrokeStyle('red')
ctx.stroke()
ctx.draw()

strokeRect

TIP

該API使用方法為： CanvasContext.strokeRect(number x, number y, number width, number height)

功能說明： 畫一個矩形（非填充），用setStrokeStyle設定矩形線條的顏色，如果沒設定默認是黑色。
參數及說明：
- number x，矩形路徑左上角的橫坐標；
- number y，矩形路徑左上角的縱坐標；
- number width，矩形路徑的寬度；
- number height，矩形路徑的高度。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

strokeText

TIP

該API使用方法為： CanvasContext.strokeText(string text, number x, number y, number maxWidth)

功能說明： 給定的（x，y）位置繪製文字描邊的方法。
參數及說明：
- string text，要繪製的文字；
- number x，文字起始點的x軸座標；
- number y，文字起始點的y軸座標；
- number maxWidth，需要繪製的最大寬度，可選。

clearRect

TIP

該API使用方法為： CanvasContext.clearRect(number x, number y, number width, number height)

功能說明： 清除畫布上在該矩形區域內的內容。
參數及說明：
- number x，矩形路徑左上角的橫坐標；
- number y，矩形路徑左上角的縱坐標；
- number width，矩形路徑的寬度；
- number height，矩形路徑的高度。
示例代碼： clearRect並非畫一個白色的矩形在地址區域，而是清空，為了有直觀感受，對canvas加了一層背景色。

<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;" />

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(0, 0, 150, 200)
ctx.setFillStyle('blue')
ctx.fillRect(150, 0, 150, 200)
ctx.clearRect(10, 10, 150, 75)
ctx.draw()

fill

TIP

該API使用方法為： CanvasContext.fill()

功能說明： 對當前路徑中的內容進行填充。默認的填充色為黑色。
示例代碼： 如果當前路徑沒有閉合，fill（）方法會將起點和終點進行連接，然後填充。

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()

fill（）填充的路徑是從beginPath（）開始計算，但是不會將fillRect（）包含進去。

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

clip

TIP

該API使用方法為： CanvasContext.fillRect(number x, number y, number width, number height)

功能說明： 填充一個矩形。用setFillStyle設定矩形的填充色，如果沒設定默認是黑色。
參數及說明：
- number x，矩形路徑左上角的橫坐標；
- number y，矩形路徑左上角的縱坐標；
- number width，矩形路徑的寬度；
- number height，矩形路徑的高度。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

fillText

TIP

該API使用方法為： CanvasContext.fillText(string text, number x, number y, number maxWidth)

功能說明： 在畫布上繪製被填充的文字。
參數及說明：
- string text，在畫布上輸出的文字；
- number x，繪製文字的左上角x座標位置；
- number y，繪製文字的左上角y座標位置；
- number maxWidth，需要繪製的最大寬度，可選。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.fillText('Hello', 20, 20)
ctx.fillText('MINA', 100, 100)

ctx.draw()

scale

TIP

該API使用方法為： CanvasContext.scale(number scaleWidth, number scaleHeight)

功能說明： 在調用後，之後創建的路徑其橫縱坐標會被縮放。多次調用倍數會相乘。
參數及說明：
- number scaleWidth，橫坐標縮放的倍數（1 = 100%，0.5 = 50%，2 = 200%）。
- number scaleHeight，縱坐標軸縮放的倍數（1 = 100%，0.5 = 50%，2 = 200%）。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)

ctx.draw()

rotate

TIP

該API使用方法為： CanvasContext.rotate(number rotate)

功能說明： 以原點為中心順時針旋轉當前坐標軸。多次調用旋轉的角度會疊加。原點可以用translate方法修改。
參數及說明： number rotate，旋轉角度，以弧度計degrees * Math. PI/180； degrees範圍為0-360。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)

ctx.draw()

transform

TIP

該API使用方法為： CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

功能說明： 使用矩陣多次疊加當前變換的方法。
參數及說明：
- number scaleX, 水准縮放；
- number scaleY，垂直縮放；
- number skewX，水准傾斜；
- number skewY，垂直傾斜；
- number translate X，水准移動；
- number translate Y，垂直移動。

translate

TIP

該API使用方法為： CanvasContext.translate(number x, number y)

功能說明： 對當前坐標系的原點（0，0）進行變換。默認的坐標系原點為頁面左上角。
參數及說明：
- number x，水准座標平移量；
- number y，豎直座標平移量。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)

ctx.draw()

setTransform

TIP

該API使用方法為： CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

功能說明： 使用矩陣重新設定（覆蓋）當前變換的方法。
參數及說明：
- number scaleX, 水准縮放；
- number scaleY，垂直縮放；
- number skewX，水准傾斜；
- number skewY，垂直傾斜；
- number translate X，水准移動；
- number translate Y，垂直移動。

setFillStyle

TIP

該API使用方法為： CanvasContext.setFillStyle(string|CanvasGradient color)

功能說明： 設定填充色。
參數及說明： string CanvasGradient color，填充的顏色，默認顏色為black。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

setStrokeStyle

TIP

該API使用方法為： CanvasContext.setStrokeStyle(string|CanvasGradient color)

功能說明： 設定描邊顏色
參數及說明： string CanvasGradient color，填充的顏色，默認顏色為black。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

setShadow

TIP

該API使用方法為： CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)

功能說明： 設定陰影樣式
參數及說明：
- number offsetX，陰影相對於形狀在水准方向的偏移，預設值為0；
- number offsetY，陰影相對於形狀在豎直方向的偏移，預設值為0；
- number blur，陰影的模糊級別，數值越大越模糊。範圍0- 100，預設值為0；
- string color，陰影的顏色。預設值為black。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.setShadow(10, 50, 50, 'blue')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

setGlobalAlpha

TIP

該API使用方法為： CanvasContext.setGlobalAlpha(number alpha)

功能說明： 設定全域畫筆透明度。
參數及說明： number alpha，透明度。範圍0-1，0表示完全透明，1表示完全不透明。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.setGlobalAlpha(0.2)
ctx.setFillStyle('blue')
ctx.fillRect(50, 50, 150, 100)
ctx.setFillStyle('yellow')
ctx.fillRect(100, 100, 150, 100)

ctx.draw()

setLineWidth

TIP

該API使用方法為： CanvasContext.setLineWidth(number lineWidth)

功能說明： 設定線條的寬度。
參數及說明： number lineWidth，線條的寬度，單位： px。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(5)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(15)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()

ctx.draw()

setLineJoin

TIP

該API使用方法為： CanvasContext.setLineJoin(string lineJoin)

功能說明： 設定線條的交點樣式。
**參數及說明：**string lineJoin，線條的結束交點樣式。 lineJoin的合法值如下：
值說明
bevel 斜角
round 圓角
miter 尖角
示例代碼：

值	說明
bevel	斜角
round	圓角
miter	尖角

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('bevel')
ctx.setLineWidth(10)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('round')
ctx.setLineWidth(10)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('miter')
ctx.setLineWidth(10)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()

ctx.draw()

setLineCap

TIP

該API使用方法為： CanvasContext.setLineCap(string lineCap)

功能說明： 設定線條的端點樣式。
**參數及說明：**string lineGap，線條的結束交點樣式。 lineCap的合法值如下
值說明
butt 向線條的每個末端添加平直的邊緣
round 向線條的每個末端添加圓形線帽
square 向線條的每個末端添加正方形線帽
示例代碼：

值	說明
butt	向線條的每個末端添加平直的邊緣
round	向線條的每個末端添加圓形線帽
square	向線條的每個末端添加正方形線帽

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('butt')
ctx.setLineWidth(10)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('round')
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('square')
ctx.setLineWidth(10)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()

ctx.draw()

setLineDash

TIP

該API使用方法為： CanvasContext.setLineDash(Array.<number> pattern, number offset)

功能說明： 設定虛線樣式。
參數及說明：
- Array.<number> pattern, 一組描述交替繪製線段和間距（座標空間單位）長度的數位。
- number offset，虛線偏移量。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

ctx.setLineDash([10, 20], 5);

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.draw()

setMiterLimit

TIP

該API使用方法為： CanvasContext.setMiterLimit(number miterLimit)

功能說明： 設定最大斜接長度，斜接長度指的是在兩條線交匯處內角和外角之間的距離，當CanvasContext.setLineJoin（）為miter時才有效，超過最大傾斜長度的，連接處將以lineJoin為bevel來顯示。
參數及說明： number miterLimit, 最大斜接長度。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(1)
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(2)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(3)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(4)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()

ctx.draw()

setFontSize

TIP

該API使用方法為： CanvasContext.setFontSize(number fontSize)

功能說明： 設定字體的字號
參數及說明： number fontSize, 字體的字型大小。
示例代碼：

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.fillText('20', 20, 20)
ctx.setFontSize(30)
ctx.fillText('30', 40, 40)
ctx.setFontSize(40)
ctx.fillText('40', 60, 60)
ctx.setFontSize(50)
ctx.fillText('50', 90, 90)

ctx.draw()

setTextAlign

TIP

該API使用方法為： CanvasContext.setTextAlign(string align)

功能說明： 設定文字的對齊。
**參數及說明：**string align, 文字的對齊管道，align的合法值如下：
值說明
left 左對齊
center 居中對齊
right 右對齊
示例代碼：

值	說明
left	左對齊
center	居中對齊
right	右對齊

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(150, 20)
ctx.lineTo(150, 170)
ctx.stroke()

ctx.setFontSize(15)
ctx.setTextAlign('left')
ctx.fillText('textAlign=left', 150, 60)

ctx.setTextAlign('center')
ctx.fillText('textAlign=center', 150, 80)

ctx.setTextAlign('right')
ctx.fillText('textAlign=right', 150, 100)

ctx.draw()

setTextBaseline

TIP

該API使用方法為： CanvasContext.setTextBaseline(string textBaseline)

功能說明： 設定文字的豎直對齊。
**參數及說明：**string textBaseline, 文字的豎直對齊管道。 textBaseline的合法值如下：
值說明
top 頂部對齊
bottom 底部對齊
middle 居中對齊
normal 默認
示例代碼：

值	說明
top	頂部對齊
bottom	底部對齊
middle	居中對齊
normal	默認

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(5, 75)
ctx.lineTo(295, 75)
ctx.stroke()

ctx.setFontSize(20)

ctx.setTextBaseline('top')
ctx.fillText('top', 5, 75)

ctx.setTextBaseline('middle')
ctx.fillText('middle', 50, 75)

ctx.setTextBaseline('bottom')
ctx.fillText('bottom', 120, 75)

ctx.setTextBaseline('normal')
ctx.fillText('normal', 200, 75)

ctx.draw()

canvasContext ​

内容說明 ​

方法集 ​

arc ​

arcTo ​

draw ​

drawImage ​

createLinearGradient ​

createCircularGradient ​

createPattern ​

measureText ​

save ​

restore ​

beginPath ​

closePath ​

moveTo ​

lineTo ​

quadraticCurveTo ​

bezierCurveTo ​

rect ​

clip ​

stroke ​

strokeRect ​

strokeText ​

clearRect ​

fill ​

clip ​

fillText ​

scale ​

rotate ​

transform ​

translate ​

setTransform ​

setFillStyle ​

setStrokeStyle ​

setShadow ​

setGlobalAlpha ​

setLineWidth ​

setLineJoin ​

setLineCap ​

setLineDash ​

setMiterLimit ​

setFontSize ​

setTextAlign ​

setTextBaseline ​

canvasContext

内容說明

方法集

arc

arcTo

draw

drawImage

createLinearGradient

createCircularGradient

createPattern

measureText

save

restore

beginPath

closePath

moveTo

lineTo

quadraticCurveTo

bezierCurveTo

rect

clip

stroke

strokeRect

strokeText

clearRect

fill

clip

fillText

scale

rotate

transform

translate

setTransform

setFillStyle

setStrokeStyle

setShadow

setGlobalAlpha

setLineWidth

setLineJoin

setLineCap

setLineDash

setMiterLimit

setFontSize

setTextAlign

setTextBaseline