tt.createCanvasContext

創(chuàng)建 canvas 組件的繪圖上下文 CanvasContext 對象

參數(shù)（選填）

繼承標(biāo)準(zhǔn)對象輸入，擴(kuò)展屬性描述：

輸出

各 callback 參數(shù)均無額外屬性

繪圖流程

假定畫布組件聲明如下：

<canvas canvas-id="aCanvas"/>

那么可以在對應(yīng)的 js 文件中按如下代碼繪制，繪制的內(nèi)容將顯示在畫布組件

const context = tt.createCanvasContext("aCanvas"); // 創(chuàng)建繪圖上下文

context.setFillStyle("#0000ff");
context.fillRect(0, 0, 100, 100); // 通過繪圖上下文操作繪圖

context.draw(); //繪圖

輔助繪圖 API

tt.createCanvasContext(canvasId)

通過傳入組件的canvasId，創(chuàng)建并返回繪圖上下文。

tt.canvasToTempFilePath(options)

導(dǎo)出當(dāng)前畫布指定區(qū)域，生成圖片并返回文件路徑。

獲取畫布像素數(shù)據(jù)。

輸入

繼承標(biāo)準(zhǔn)對象輸入，擴(kuò)展屬性描述：

輸出

success返回對象參數(shù)的擴(kuò)展屬性：

tt.canvasPutImageData(options)

? 警告該 API 暫時無法使用

將像素數(shù)據(jù)繪制到畫布的方法。

輸入

繼承標(biāo)準(zhǔn)對象輸入，擴(kuò)展屬性描述：

輸出

各 callback 參數(shù)均無額外屬性

CanvasContext

context.draw(reserve, callback)

繪圖。其中：

• reserve數(shù)據(jù)類型為boolean，表示本次繪制前是否清空畫布。默認(rèn)為false
• callback數(shù)據(jù)類型為function，是繪制成功回調(diào)。

HTML Canvas 2D Context API List

所有 API 請參考官方文檔，其中標(biāo)注刪除線的是不支持的。

The canvas state

• save()
• restore()

Line styles

• lineWidth
• lineCap
• lineJoin
• miterLimit
• setLineDash(segments)
• getLineDash()
• lineDashOffset

Text styles

• font*
• textAlign
• textBaseline

Building paths

• moveTo(x, y)
• closePath()
• lineTo(x, y)
• quadraticCurveTo(cpx, cpy, x, y)
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
• arcTo(x1, y1, x2, y2, radius)
• arc(x, y, radius, startAngle, endAngle[, counterclockwise])
• rect(x, y, w, h)

Transformations

• scale(x, y)
• rotate(angle)
• translate(x, y)
• transform(a, b, c, d, e, f)
• setTransform(a, b, c, d, e, f)

Fill and stroke styles

• fillStyle
• strokeStyle
• gradient = createLinearGradient(x0, y0, x1, y1)
• gradient = createRadialGradient(x0, y0, r0, x1, y1, r1)gradient.addColorStop(offset, color)
• createPattern(image, repetition)

Drawing rectangles to the canvas

• clearRect(x, y, w, h)
• fillRect(x, y, w, h)
• strokeRect(x, y, w, h)

Drawing text to the canvas

• fillText(text, x, y[, maxWidth])
• strokeText(text, x, y[, maxWidth])
• metrics = measureText(text)metrics.width

Drawing paths to the canvas

• beginPath()
• fill()
• stroke()
• drawFocusIfNeeded(element)
• clip()
• isPointInPath(x, y)

Drawing images to the canvas

• drawImage(image, dx, dy)
• drawImage(image, dx, dy, dw, dh)
• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Pixel manipulation

• imagedata = createImageData(sw, sh)
• imagedata = createImageData(imagedata)
• imagedata = getImageData(sx, sy, sw, sh)*imagedata.widthimagedata.heightimagedata.data
• putImageData(imagedata, dx, dy[, dirtyX, dirtyY, dirtyWidth, dirtyHeight])

?? 注意getImageData和putImageData請使用canvasGetImageData和canvasPutImageData

Compositing

• globalAlpha
• globalCompositeOperation

Shadows

• shadowColor
• shadowOffsetX
• shadowOffsetY
• shadowBlur

Tips

• tt Canvas API 的調(diào)用請放在 Page 中，否則可能有些問題。