Canvas实例，可通过SelectorQuery获取。
起始版本： 2.0.1
属性：
| 参数 | 类型 | 描述 |
|---|---|---|
| width | number | 画布宽度。 |
| height | number | 画布高度。 |
Canvas.getContext(string contextType)
返回Canvas的绘图上下文。
起始版本： 2.0.2
参数：
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
| contextType | string | 否 | 上下文类型。 contextType的合法值：2d。 |
返回值：
返回RenderingContext对象。
示例：
has.createSelectorQuery().select('#myCanvas')
.node((res) => {
const canvas = res.node;
const ctx = canvas.getContext('2d');
console.info('canvas context: ', ctx);
})
.exec(); Canvas.createImage()
创建一个图片对象，仅支持2D Canvas类型。
起始版本： 2.0.2
返回值：
返回Image对象。
示例：
has.createSelectorQuery().select('#myCanvas')
.node((res) => {
const canvas = res.node;
const ctx = canvas.getContext('2d');
const img = canvas.createImage();
img.src = 'https://www.example.com/xxxx.png'; // 此处仅为样例，请开发者更换为可用图片资源地址
img.onload = () => {
ctx.drawImage(img, 0, 10, 237, 133);
console.info('image width', img.width);
console.info('image height', img.height);
};
img.onerror = (err) => {
console.error('createImage err', err);
};
})
.exec(); Canvas.toDataURL(string type, number encoderOptions)
返回一个包含图片展示的data URI。
起始版本： 2.0.2
参数：
| 参数 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| type | string | image/png | 否 | 图片格式，默认值为'image/png'。 合法值：'image/png'，'image/jpeg'，'image/webp'。 |
| encoderOptions | number | 0.92 | 否 | 图片的质量，取值范围为0-1。 只有在指定图片格式为'image/jpeg'或'image/webp'的情况下，才可以从0到1的区间内选择图片的质量。 |
返回值：
| 类型 | 描述 |
|---|---|
| string | 返回一个包含图片展示的data URI。 |
示例：
has.createSelectorQuery().select('#myCanvas')
.node((res) => {
const canvas = res.node;
const ctx = canvas.getContext('2d');
const base64 = canvas.toDataURL();
console.info('toDataURL res: ', base64);
})
.exec(); Canvas.createPath2D(string|Path2D path)
创建一个Path2D对象。
起始版本： 2.0.2
参数：
| 参数 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| path | string|Path2D | 否 | - | 用于创建新路径的源路径。默认值：创建空路径。 |
返回值：
返回Path2D对象。
示例：
has.createSelectorQuery().select('#myCanvas')
.node((res) => {
const canvas = res.node;
const ctx = canvas.getContext('2d');
const path = canvas.createPath2D();
})
.exec(); Canvas.requestAnimationFrame(function callback)
注册一个函数，在下次进行重绘时执行。
起始版本： 2.0.2
参数：
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
| callback | function | 是 | 在下次重绘之前调用的回调函数。 |
返回值：
返回requestId，作为动画帧请求ID，可以传递给Canvas.cancelAnimationFrame以实现取消该动画帧请求。
示例：
has.createSelectorQuery().select('#myCanvas')
.node((res) => {
const canvas = res.node;
const ctx = canvas.getContext('2d');
let x = 0;
const draw = () => {
ctx.clearRect(0, 0, 300, 300);
x = (x + 2) % 300;
ctx.fillStyle = 'red';
ctx.fillRect(x, 50, 50, 50);
const requestId = canvas.requestAnimationFrame(draw);
};
draw();
})
.exec(); Canvas.cancelAnimationFrame(number requestId)
取消由Canvas.requestAnimationFrame添加到计划中的动画帧请求。
起始版本： 2.0.2
参数：
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
| requestId | number | 是 | 动画帧请求ID，调用Canvas.requestAnimationFrame时返回。 |
示例：
has.createSelectorQuery().select('#myCanvas')
.node((res) => {
const canvas = res.node;
canvas.cancelAnimationFrame(requestId); // requestId是调用Canvas.requestAnimationFrame接口返回的值
})
.exec();