画布

createCanvasContext

CanvasContext ft.createCanvasContext(string canvasId, Object this)

创建 canvas 的绘图上下文 CanvasContext 对象

参数

string canvasId

要获取上下文的 canvas 组件 canvas-id 属性

Object this

在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 canvas ，如果省略则不在任何自定义组件内查找。

返回值

CanvasContext

canvasToTempFilePath

CanvasContext ft.canvasToTempFilePath(Object object, Object this) 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。

参数

Object object

属性	类型	默认值	必填	说明	最低版本
x	number	0	否	指定的画布区域的左上角横坐标
y	number	0	否	指定的画布区域的左上角纵坐标
width	number	canvas宽度-x	否	指定的画布区域的宽度
height	number	canvas高度-y	否	指定的画布区域的高度
destWidth	number	width*屏幕像素密度	否	输出的图片的宽度
destHeight	number	height*屏幕像素密度	否	输出的图片的高度
canvasId	string		否	画布标识，传入 canvas 组件的 canvas-id
canvas	Object		否	画布标识，传入 canvas 组件实例 （canvas type="2d" 时使用该属性）。
fileType	string	png	否	目标文件的类型
quality	number		否	图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	functio		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.fileType 的合法值

值	说明	最低版本
jpg	jpg 图片
png	png 图片

object.success 回调函数

参数

Object res

属性	类型	说明
tempFilePath	string	生成文件的临时路径 (本地路径)

Object this

在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件

示例代码

ft.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath)
  }
})

canvasPutImageData

CanvasContext ft.canvasPutImageData(Object object, Object this) 将像素数据绘制到画布。在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 canvas 组件

参数

Object object

属性	类型	默认值	必填	说明
canvasId	string		是	画布标识，传入 canvas 组件的 canvas-id 属性。
data	Uint8ClampedArray		是	图像像素点数据，一维数组，每四项表示一个像素点的 rgba
x	number		是	源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）
y	number		是	源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）
width	number		是	源图像数据矩形区域的宽度
height	number		是	源图像数据矩形区域的高度
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

Object this

在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件

示例代码

const data = new Uint8ClampedArray([255, 0, 0, 1])
ft.canvasPutImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 1,
  height: 1,
  data: data,
  success (res) {}
})

canvasGetImageData

CanvasContext ft.canvasGetImageData(Object object, Object this) 获取 canvas 区域隐含的像素数据。

参数

Object object

属性	类型	默认值	必填	说明
canvasId	string		是	画布标识，传入 canvas 组件的 canvas-id 属性。
x	number		是	将要被提取的图像数据矩形区域的左上角横坐标
y	number		是	将要被提取的图像数据矩形区域的左上角纵坐标
width	number		是	将要被提取的图像数据矩形区域的宽度
height	number		是	将要被提取的图像数据矩形区域的高度
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
width	number	图像数据矩形的宽度
height	number	图像数据矩形的高度
data	Uint8ClampedArray	图像像素点数据，一维数组，每四项表示一个像素点的 rgba

Object this

在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件

示例代码

ft.canvasGetImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})

CanvasContext

canvas 组件的绘图上下文。CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致。

属性

• string|CanvasGradient fillStyle
  填充颜色。用法同 CanvasContext.setFillStyle()。

• string|CanvasGradient strokeStyle
  边框颜色。用法同 CanvasContext.setStrokeStyle()。

• number shadowOffsetX
  阴影相对于形状在水平方向的偏移

• number shadowOffsetY
  阴影相对于形状在竖直方向的偏移​

• number shadowColor
  阴影的颜色

• number shadowBlur
  阴影的模糊级别

• number lineWidth
  线条的宽度。用法同 CanvasContext.setLineWidth()。

• string lineCap
  线条的端点样式。用法同 CanvasContext.setLineCap()。

• string lineJoin
  线条的交点样式。用法同 CanvasContext.setLineJoin()。

lineJoin 的合法值

值	说明	最低版本
bevel	斜角
round	圆角
miter	尖角

• number miterLimit
  最大斜接长度。用法同 CanvasContext.setMiterLimit()。

• number lineDashOffset
  虚线偏移量，初始值为0

• string font
  当前字体样式的属性。符合 CSS font 语法 的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif。

• number globalAlpha
  全局画笔透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。

• string globalCompositeOperation
  在绘制新形状时应用的合成操作的类型。目前Android版本只适用于 fill 填充块的合成，用于 stroke 线段的合成效果都是 source-over。

目前支持的操作有
​

方法

• CanvasContext.draw(boolean reserve, function callback)
  将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

• CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)
  创建一个线性的渐变颜色。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点，至少要两个。

• CanvasGradient CanvasContext.createCircularGradient(number x, number y, number r)
  创建一个圆形的渐变颜色。起点在圆心，终点在圆环。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点，至少要两个。​

• CanvasContext.createPattern(string image, string repetition)
  对指定的图像创建模式的方法，可在指定的方向上重复元图像

• Object CanvasContext.measureText(string text)
  测量文本尺寸信息。目前仅返回文本宽度。同步接口。

• CanvasContext.save()
  保存绘图上下文。

• CanvasContext.restore()
  恢复之前保存的绘图上下文。

• CanvasContext.beginPath()
  开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

• CanvasContext.moveTo(number x, number y)
  把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

• CanvasContext.lineTo(number x, number y)
  增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

• CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)
  创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。

• CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
  创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。

• CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
  创建一条弧线。

• CanvasContext.rect(number x, number y, number width, number height)
  创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中

• CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)
  根据控制点和半径绘制圆弧路径。

• CanvasContext.clip()
  从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。

• CanvasContext.fillRect(number x, number y, number width, number height)
  填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。

• CanvasContext.strokeRect(number x, number y, number width, number height)
  画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色，如果没设置默认是黑色。

• CanvasContext.clearRect(number x, number y, number width, number height)
  清除画布上在该矩形区域内的内容

• CanvasContext.fill()
  对当前路径中的内容进行填充。默认的填充色为黑色。

• CanvasContext.stroke()
  画出当前路径的边框。默认颜色色为黑色。

• CanvasContext.closePath()
  关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。

• CanvasContext.scale(number scaleWidth, number scaleHeight)
  在调用后，之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。

• CanvasContext.rotate(number rotate)
  以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate 方法修改。

• CanvasContext.translate(number x, number y)
  对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。

• CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
  绘制图像到画布

• CanvasContext.strokeText(string text, number x, number y, number maxWidth)
  给定的 (x, y) 位置绘制文本描边的方法

• CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
  使用矩阵多次叠加当前变换的方法
  ​

• CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
  使用矩阵重新设置（覆盖）当前变换的方法

• CanvasContext.setFillStyle(string|CanvasGradient color)
  设置填充色。

• CanvasContext.setStrokeStyle(string|CanvasGradient color)
  设置描边颜色。

• CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)
  设定阴影样式。

• CanvasContext.setGlobalAlpha(number alpha)
  设置全局画笔透明度。

• CanvasContext.setLineWidth(number lineWidth)
  设置线条的宽度。

• CanvasContext.setLineJoin(string lineJoin)
  设置线条的交点样式

• CanvasContext.setLineCap(string lineCap)
  设置线条的端点样式

• CanvasContext.setLineDash(Array.<number> pattern, number offset)
  设置虚线样式。

• CanvasContext.setMiterLimit(number miterLimit)
  设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 CanvasContext.setLineJoin() 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。

• CanvasContext.fillText(string text, number x, number y, number maxWidth)
  在画布上绘制被填充的文本

• CanvasContext.setFontSize(number fontSize)
  设置字体的字号

• CanvasContext.setTextAlign(string align)
  设置文字的对齐

• CanvasContext.setTextBaseline(string textBaseline)
  设置文字的竖直对齐

Canvas

Canvas 实例，可通过 SelectorQuery 获取。

若 canvas 配置 native prop 属性，则会用原生渲染方式处理，基础库 2.12.1、iOS/安卓 2.35.1 开始支持。

<!-- canvas.fxml -->
<canvas type="2d" id="canvas"></canvas>

// canvas.js
Page({
  onReady() {
    const query = ft.createSelectorQuery().select('#canvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = 2
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.fillRect(0, 0, 100, 100)
      })
  }
})

Canvas.getContext()

该方法返回 Canvas 的绘图上下文

通过 selector query 获取的 canvas，其 context api 与 web canvas 一致

Canvas.createImage()

创建一个 image 对象，仅 createSelectorQuery 获取到的 canvas 有该方法

const img = canvas.createImage()
img.onload = () => {
  const pat = context.createPattern(img, "repeat")
  context.fillStyle = pat
  context.rect(0, 0, 150, 100)
  context.fill()
}
// 图片路径
img.src = '../../../image/icon_cloud_HL.png'

CanvasGradient.addColorStop

CanvasGradient.addColorStop(number stop, string color)

添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染

参数

属性	类型	说明
stop	number	表示渐变中开始与结束之间的位置，范围 0-1。
color	string	渐变点的颜色。

示例代码

const ctx = ft.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
})

Color

颜色。可以用以下几种方式来表示 canvas 中使用的颜色：

RGB 颜色： 如 'rgb(255, 0, 0)'

RGBA 颜色：如 'rgba(255, 0, 0, 0.3)'

16 进制颜色： 如 '#FF0000'

预定义的颜色： 如 'red'

Image

图片对象

属性

string src

图片的 URL

number width

图片的真实宽度

number height

图片的真实高度

string referrerPolicy

origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；

function onload

图片加载完成后触发的回调函数

function onerror

图片加载发生错误后触发的回调函数

ImageData

ImageData 对象

属性

number width

使用像素描述 ImageData 的实际宽度

number height

使用像素描述 ImageData 的实际高度

Uint8ClampedArray data

一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示

OffscreenCanvas

离屏 canvas 实例，可通过 ft.createOffscreenCanvas 创建

属性

number width

画布宽度

number height

画布高度

OffscreenCanvas.createImage()

创建一个图片对象

返回值

Image

注意不允许混用 webgl 和 2d 画布创建的图片对象，使用时请注意尽量使用 canvas 自身的 createImage 创建图片对象。

OffscreenCanvas.getContext()

该方法返回 OffscreenCanvas 的绘图上下文

参数

string contextType

绘图上下文类型，需要与 createOffscreenCanvas 时传入的 type 一致

contextType 的合法值

值	说明	最低版本
webgl	webgl类型上下文
2d	2d类型上下文

返回值

RenderingContext

注意不允许混用 webgl 和 2d 绘图上下文，传入的 contextType 必须要与 ft.createOffscreenCanvas 传入的 type 类型一致。