绘图流程
tt Canvas API List
tt Context API List
- context.draw(reserve, callback)
HTML Canvas 2D Context API List
已知问题

Canvas绘图

绘图流程

假定画布组件声明如下：

<canvas canvas-id="aCanvas"/>

那么可以在对应的js文件中按如下代码绘制，绘制的内容将显示在画布组件

const context = tt.createCanvasContext('aCanvas'); // 创建绘图上下文
context.fillStyle = '#0000ff';
context.fillRect(0, 0, 100, 100); // 通过绘图上下文操作绘图
context.draw(); //绘图

tt Canvas API List

tt.createCanvasContext(canvasId)

通过传入组件的canvasId，创建并返回绘图上下文。

tt.canvasToTempFilePath(options)

导出当前画布指定区域，生成图片并返回文件路径。

输入

继承标准对象输入，扩展属性描述：

名称	数据类型	属性	默认值	描述
`canvasId`	`string`	required	N/A	canvasId
`x`	`number`	optional	`0`	导出区域x轴起点
`y`	`number`	optional	`0`	导出区域y轴起点
`width`	`number`	optional	`<canvas>width`	导出区域宽度
`height`	`number`	optional	`<canvas>height`	导出区域高度
`destWidth`	`number`	optional	`width`	输出的图片尺寸宽度
`destHeight`	`number`	optional	`height`	输出的图片尺寸高度
`fileType`	`string`	optional	`png`	图片格式，可以是`jpg`或`png`
`quality`	`number`	optional	`1`	图片的质量，取值范围为`(0, 1]`

输出

各callback参数均无额外属性

tt.canvasGetImageData(options)

WARNING

该API暂时无法使用

获取画布像素数据。

输入

继承标准对象输入，扩展属性描述：

名称	数据类型	属性	默认值	描述
`canvasId`	`string`	required	N/A	canvasId
`x`	`number`	required	N/A	x坐标
`y`	`number`	required	N/A	y坐标
`width`	`number`	required	N/A	区域宽度
`height`	`number`	required	N/A	区域高度

输出

success返回对象参数的扩展属性：

名称	数据类型	描述
`width`	`number`	返回数据对应画布宽度
`height`	`number`	返回数据对应画布高度
`data`	`Uint8ClampedArray`	RGBA数据

tt.canvasPutImageData(options)

WARNING

该API有暂时无法使用

将像素数据绘制到画布的方法。

输入

继承标准对象输入，扩展属性描述：

名称	数据类型	属性	默认值	描述
`canvasId`	`string`	required	N/A	canvasId
`data`	`Uint8ClampedArray`	required	N/A	RGBA数据
`x`	`number`	required	N/A	x轴坐标
`y`	`number`	required	N/A	y轴坐标
`width`	`number`	required	N/A	绘制区域宽度
`height`	`number`	required	N/A	绘制区域高度

输出

各callback参数均无额外属性

tt Context API List

context.draw(reserve, callback)

绘图。其中：

reserve数据类型为boolean，表示本次绘制前是否清空画布。默认为false
callback数据类型为function，是绘制成功回调。

HTML Canvas 2D Context API List

所有API请参考官方文档，其中标注~~删除线~~的是不支持的。

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.width
- imagedata.height
- imagedata.data
putImageData(imagedata, dx, dy[, dirtyX, dirtyY, dirtyWidth, dirtyHeight])

⚠️注意

getImageData和putImageData请使用canvasGetImageData和canvasPutImageData

Compositing

globalAlpha
globalCompositeOperation

Shadows

shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur

已知问题

tt Canvas API 的调用请放在Page中，否则可能有些问题。

原文: https://developer.toutiao.com/docs/api/canvas.html