# 画布

# createCanvasContext

CanvasContext ft.createCanvasContext(string canvasId, Object this)

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

该 API 已停止维护

推荐使用 wx.selectorQuery 的方式获取 canvas 节点

参数

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	否	目标文件的类型	有效值为 jpg 和 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'

# Canvas.createImageData()

创建一个 ImageData 对象。仅支持在 2D Canvas 中使用。

# Canvas.toDataURL()

该 API 依赖底层的同步机制实现, 目前 ios 支持, 安卓不支持

返回一个包含图片展示的 data URI

获取图片可使用 canvasToTempFilePath 方案替代

# Canvas.requestAnimationFrame(function callback)

在下次进行重绘时执行回调

# Canvas.cancelAnimationFrame()

取消 requestAnimationFrame 添加的回调请求

# 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 创建。目前离屏 canvas 部分 canvas 功能和 API 尚未支持，建议使用普通 canvas 替代。

属性

number width

画布宽度

number height

画布高度

# OffscreenCanvas.createImage()

创建一个图片对象

返回值

Image

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

# OffscreenCanvas.getContext()

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

参数

string contextType

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

contextType 的合法值

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

返回值

RenderingContext

FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# 画布

# createCanvasContext

# canvasToTempFilePath

# canvasPutImageData

# canvasGetImageData

# CanvasContext

# Canvas

# Canvas.getContext()

# Canvas.createImage()

# Canvas.createImageData()

# Canvas.toDataURL()

# Canvas.requestAnimationFrame(function callback)

# Canvas.cancelAnimationFrame()

# CanvasGradient.addColorStop

# Color

# Image

# ImageData

# OffscreenCanvas

# OffscreenCanvas.createImage()

# OffscreenCanvas.getContext()