小程序API能力集成指南——画布API汇总（一）

RJS Canvas

Canvas

Canvas 实例, 在 RJS 中可通过 getCanvasById 获取。

属性

number width：画布宽度

number height：画布高度

方法

如下。

1、getContext

Canvas.getContext(string contextType)

RenderingContext Canvas.getContext(string contextType)

功能描述

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

参数

string contextType

返回值

支持获取 2D 和 WebGL 绘图上下文

RenderingContext

2、createImage

Canvas.createImage()

Image Canvas.createImage()

功能描述

创建一个图片对象。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

参数

function callback ：执行的 callback

返回值

Image

3、createImageData

Canvas.createImageData()

ImageData Canvas.createImageData()

功能描述

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

参数

width: number 宽度

height: number 高度

settings?: ImageDataSettings 配置项

返回值

ImageData

4、createPath2D

Canvas.createPath2D

Path2D Canvas.createPath2D(Path2D path)

功能描述

创建 Path2D 对象。

参数

Path2D path

返回值

Path2D

5、requestAnimationFrame

Canvas.requestAnimationFrame

number Canvas.requestAnimationFrame(function callback)

功能描述

在下次进行重绘时执行。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

参数

function callback ：执行的 callback

返回值

number：请求 ID

6、cancelAnimationFrame

Canvas.cancelAnimationFrame 

Canvas.cancelAnimationFrame(number requestID)

功能描述

取消由 requestAnimationFrame 添加到计划中的动画帧请求。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

参数

number requestID

  👉 立即开发。

Canvas ImageData

ty.canvasGetImageData(Object object)

获取 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	Array（结构同 Uint8ClampedArray）	图像像素点数据，一维数组，每四项表示一个像素点的 rgba

示例代码

ty.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 Array); // true
    console.log(res.data.length); // 100 * 100 * 4
  },
});

ty.canvasPutImageData(Object object)

将像素数据绘制到画布。

参数

Object object

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

示例代码

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

CanvasGradient

渐变对象

方法

CanvasGradient.addColorStop(number stop, string color)

addColorStop

CanvasGradient.addColorStop(number stop, string color)

功能描述

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

参数

number stop

表示渐变中开始与结束之间的位置，范围 0-1。

string color

渐变点的颜色。

示例代码

const ctx = ty.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();

  👉 立即开发。