阅读(1904)
赞(8)
tt.createCanvasContext
2020-02-11 18:32:38 更新
创建 canvas 组件的绘图上下文 CanvasContext 对象
参数（选填）
继承标准对象输入，扩展属性描述：
| 名称 | 数据类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
canvasId | string | 是 | N/A | canvasId |
x | number | 0 | 导出区域 x 轴起点 | |
y | number | 0 | 导出区域 y 轴起点 | |
width | number | <canvas>width | 导出区域宽度 | |
height | number | <canvas>height | 导出区域高度 | |
destWidth | number | width | 输出的图片尺寸宽度 | |
destHeight | number | height | 输出的图片尺寸高度 | |
fileType | string | png | 图片格式，可以是jpg或png | |
quality | number | 1 | 图片的质量，取值范围为(0, 1] |
输出
各 callback 参数均无额外属性
绘图流程
假定画布组件声明如下：
<canvas canvas-id="aCanvas"/>那么可以在对应的 js 文件中按如下代码绘制，绘制的内容将显示在画布组件
const context = tt.createCanvasContext("aCanvas"); // 创建绘图上下文
context.setFillStyle("#0000ff");
context.fillRect(0, 0, 100, 100); // 通过绘图上下文操作绘图
context.draw(); //绘图辅助绘图 API
tt.createCanvasContext(canvasId)
通过传入组件的canvasId，创建并返回绘图上下文。
tt.canvasToTempFilePath(options)
导出当前画布指定区域，生成图片并返回文件路径。
获取画布像素数据。
输入
继承标准对象输入，扩展属性描述：
| 名称 | 数据类型 | 属性 | 默认值 | 描述 |
|---|---|---|---|---|
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)
❗ 警告该 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 参数均无额外属性
CanvasContext
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.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 的调用请放在 Page 中，否则可能有些问题。