绘图流程

假定画布组件声明如下：

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

  3. context.fillStyle = '#0000ff';
  5. context.draw(); //绘图

tt Canvas API List

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

tt.canvasToTempFilePath(options)

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

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

输出

各callback参数均无额外属性

tt.canvasGetImageData(options)

该API暂时无法使用

获取画布像素数据。

继承，扩展属性描述：

输出

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

tt.canvasPutImageData(options)

WARNING

该API有暂时无法使用

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

输出

各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()
  • 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)
  • 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 = 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)
  • 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

已知问题

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