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); // 100console.log(res.height); // 100console.log(res.data instanceof Array); // trueconsole.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();
👉 立即开发。
