畫布概要
createOffscreenCanvas
TIP
該API使用方法為： OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this)
- 功能說明： 創建離屏canvas實例。
- 參數及說明：
number width: 畫布寬度。
number height： 畫布高度。
object this： 在自定義組件下，當前組件實例的this。
object object
内容 類型 預設值 必填 說明 type string webgl 否 創建的離屏canvas類型 width number - 否 畫布寬度。 height number - 否 畫布高度。 compInst Component - 否 在自定義組件下，當前組件實例的this。 - object.type
合法值 說明 webgl webgl類型上下文 2d 2d類型上下文
createCanvasContext
TIP
該API使用方法為： CanvasContext wx.createCanvasContext(string canvasId, Object this)
功能說明： 創建canvas的繪圖上下文 canvasContext 對象
參數及說明：
- string canvasId 要獲取上下文的<canvas>組件canvas-id内容。
- Object this： 在自定義組件下，當前組件實例的this，表示在這自定義組件下查找擁有canvas-id的<canvas>，如果省略，則不在任何自定義組件內查找。
返回值： canvasContext。
canvasToTempFilePath
TIP
該API使用方法為： wx.canvasToTempFilePath(Object object, Object this)
功能說明： 把當前畫布指定區域的內容匯出，生成指定大小的圖片，在draw（）回檔裏調用該方法才能保證圖片匯出成功。
參數及說明： Object object。
内容 類型 預設值 必填 說明 x number 0 否 指定的畫布區域的左上角橫坐標 y number 0 否 指定的畫布區域的左上角縱坐標 width number canvas寬度-x 否 指定的畫布區域的寬度 height number canvas高度-y 否 指定的畫布區域的高度 destWidth number width*荧幕點數密度 否 輸出的圖片的寬度 destHeight number height*荧幕點數密度 否 輸出的圖片的高度 canvasId string - 是 畫布標識，傳入<canvas>組件的canvas-id fileType string png 否 目標文件的類型 quality number - 是 圖片的質量，現時僅對jpg有效。 取值範圍為（0，1]，不在範圍內時當作1.0處理。 success Function - 否 接口調用成功的回呼函數 fail Function - 否 接口調用失敗的回呼函數 complete Function - 否 接口調用結束的回呼函數（無論成功與否都執行） object.fileType的合法值
值 說明 jpg jpg圖片 png png圖片 Object.success的res回檔結果
值 類型 說明 tempFilePath string 生成文件的臨時路徑（本地路徑）
示例代碼：
wx.canvasToTempFilePath({
x: 100,
y: 200,
width: 50,
height: 50,
destWidth: 100,
destHeight: 100,
canvasId: 'myCanvas',
success(res) {
console.log(res.tempFilePath)
}
})canvasPutImageData
TIP
該API使用方法為： wx.canvasPutImageData(Object object, Object this)
功能說明： 將點數數據繪製到畫布，在自定義組件下，第二個參數傳入自定義組件實例this，以操作組件內canvas組件。
參數1 : Object object。
内容 類型 預設值 必填 說明 canvasId string - 是 畫布標識，傳入<canvas>組件的canvas-id内容 data Uint8ClampedArray - 是 影像點數點數據，一維數組，每四項表示一個點數點的rgba x number - 是 源影像數據在目標畫布中的位置偏移量（x軸方向的偏移量） y number - 是 源影像數據在目標畫布中的位置偏移量（y軸方向的偏移量） width number - 是 源影像數據矩形區域的寬度 height number - 是 源影像數據矩形區域的高度 success Function - 否 接口調用成功的回呼函數 fail Function - 否 接口調用失敗的回呼函數 complete Function - 否 接口調用結束的回呼函數（無論成功與否都執行） - 參數2 ： Object this，在自定義組件下，當前組件實例的this，以操作組件內<canvas>組件。。
示例代碼：
const data = new Uint8ClampedArray([255, 0, 0, 1])
wx.canvasPutImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 1,
data,
success(res) {}
})canvasGetImageData
TIP
該API使用方法為： wx.canvasGetImageData(Object object, Object this)
功能說明： 獲取canvas區域隱含的點數數據。
參數1: Object object。
内容 類型 預設值 必填 說明 canvasId string - 是 畫布標識，傳入<canvas>組件的canvas-id内容 x number - 是 將要被選取的影像數據矩形區域的左上角橫坐標 y number - 是 將要被選取的影像數據矩形區域的左上角縱坐標 width number - 是 將要被選取的影像數據矩形區域的寬度 height number - 是 將要被選取的影像數據矩形區域的高度 success Function - 否 接口調用成功的回呼函數 fail Function - 否 接口調用失敗的回呼函數 complete Function - 否 接口調用結束的回呼函數（無論成功與否都執行） object.success回呼函數參數： ： Object res。
内容 類型 說明 width number 影像數據矩形的寬度 height number 影像數據矩形的高度 data Uint8ClampedArray 影像點數點數據，一維數組，每四項表示一個點數點的rgba 參數2 ： Object this，在自定義組件下，當前組件實例的this，以操作組件內<canvas>組件。。
示例代碼：
wx.canvasGetImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 100,
height: 100,
success(res) {
console.log(res.width) // 100
console.log(res.height) // 100
console.log(res.data instanceof Uint8ClampedArray) // true
console.log(res.data.length) // 100 * 100 * 4
}
})Image
功能說明： 圖片對象
參數及說明：
内容 類型 說明 src string 圖片的URL width number 圖片的真實寬度 height number 圖片的真實高度 referrerPolicy string origin：發送完整的referrer；no-referrer：不發送。格式固定為https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 為小程序的 appid，{version} 為小程序的版本號，版本號為 0 表示為開發版、體驗版以及審核版本，版本號為 devtools 表示為開發者工具，其餘版本； onload function 圖片加載完成後觸發的回呼函數 onerror function 圖片加載發生錯誤後觸發的回呼函數
ImageData
功能說明： ImageData對象
參數及說明：
内容 類型 說明 width number 使用點數描述ImageData的實際寬度 height number 使用點數描述ImageData的實際高度 data Uint8ClampedArray 一維數組，包含以RGBA順序的數據，數據使用0至255（包含）的整數表示
canvasGradient
- 功能說明： 漸變對象
.addColorStop
TIP
該API使用方法為： CanvasGradient.addColorStop(number stop, Color color)
功能說明： 添加顏色的漸變點。 小於最小stop的部分會按最小stop的color來渲染，大於最大stop的部分會按最大stop的color來渲染，相當於CanvasGradient.addColorStop（number stop，Color color）。
參數1： number stop, 表示漸變中開始與結束之間的位置，範圍0-1。
參數2: Color color 漸變點的顏色。示例代碼：
const ctx = wx.createCanvasContext('myCanvas')
// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')
// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()RenderingContext
- 功能說明： Canvas繪圖上下文
- 通過Canvas.getContext（'2d'）接口可以獲取CanvasRenderingContext2D對象，實現了 HTML Canvas 2D Context 定義的内容、方法。
- 通過Canvas.getContext（'webgl'）或OffscreenCanvas.getContext（'webgl'）接口可以獲取WebGLRenderingContext對象，實現了 WebGL 1.0 定義的所有内容、方法、常數。
詳情請見 canvasContext。
OffscreenCanvas
詳情請見 OffscreenCanvas。
Path2D
詳情請見 Path2D。
Canvas
詳情請見 Canvas。
Color
詳情請見 Color。