Canvas绘图

绘图流程

假定画布组件声明如下:

  1. <canvas canvas-id="aCanvas"/>

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

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

tt Canvas API List

tt.createCanvasContext(canvasId)

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

tt.canvasToTempFilePath(options)

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

输入

继承标准对象输入,扩展属性描述:

名称数据类型属性默认值描述
canvasIdstringrequiredN/AcanvasId
xnumberoptional0导出区域x轴起点
ynumberoptional0导出区域y轴起点
widthnumberoptional<canvas>width导出区域宽度
heightnumberoptional<canvas>height导出区域高度
destWidthnumberoptionalwidth输出的图片尺寸宽度
destHeightnumberoptionalheight输出的图片尺寸高度
fileTypestringoptionalpng图片格式,可以是jpgpng
qualitynumberoptional1图片的质量,取值范围为(0, 1]

输出

各callback参数均无额外属性

tt.canvasGetImageData(options)

WARNING

该API暂时无法使用

获取画布像素数据。

输入

继承标准对象输入,扩展属性描述:

名称数据类型属性默认值描述
canvasIdstringrequiredN/AcanvasId
xnumberrequiredN/Ax坐标
ynumberrequiredN/Ay坐标
widthnumberrequiredN/A区域宽度
heightnumberrequiredN/A区域高度

输出

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

名称数据类型描述
widthnumber返回数据对应画布宽度
heightnumber返回数据对应画布高度
dataUint8ClampedArrayRGBA数据

tt.canvasPutImageData(options)

WARNING

该API有暂时无法使用

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

输入

继承标准对象输入,扩展属性描述:

名称数据类型属性默认值描述
canvasIdstringrequiredN/AcanvasId
dataUint8ClampedArrayrequiredN/ARGBA数据
xnumberrequiredN/Ax轴坐标
ynumberrequiredN/Ay轴坐标
widthnumberrequiredN/A绘制区域宽度
heightnumberrequiredN/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中,否则可能有些问题。

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