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 图片格式,可以是jpgpng
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])

⚠️注意

getImageDataputImageData请使用canvasGetImageDatacanvasPutImageData

Compositing

  • globalAlpha
  • globalCompositeOperation

Shadows

  • shadowColor
  • shadowOffsetX
  • shadowOffsetY
  • shadowBlur

已知问题

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