说明：本文档适用于小部件3.0。
小部件画布组件，支持 WebGL 和 Canvas2D。
iOS：10.3.10及以上版本。
Android：10.3.16及以上版本。
需要 小部件 2.0。
为保证 Canvas 组件准确被创建，请在Canvas标签上绑定 onReady 事件，以保证时序。
支持 WebGL 和 Canvas2D。
属性 |
类型 |
描述 |
是否支持 |
将要支持 |
id |
String |
组件唯一标识符。注意：同一页面中的 id 不可重复。 |
是 |
/ |
style |
String |
- |
是 |
/ |
class |
String |
- |
是 |
/ |
disable-scroll |
Boolean |
禁止屏幕滚动以及下拉刷新。默认值： false |
是 |
/ |
onTap |
EventHandle |
点击。 |
是 |
/ |
onTouchStart |
EventHandle |
触摸动作开始。 |
是 |
/ |
onTouchMove |
EventHandle |
触摸后移动。 |
是 |
/ |
onTouchEnd |
EventHandle |
触摸动作结束。 |
是 |
/ |
onTouchCancel |
EventHandle |
触摸动作被打断，如来电提醒，弹窗。 |
是 |
/ |
onLongTap |
EventHandle |
长按 500ms 之后触发，触发了长按事件后进行移动将不会触发屏幕的滚动。 |
是 |
/ |
type |
String |
类型。设置 type 属性后，会渲染成 native canvas。可选值：2d、webgl |
是 |
/ |
onReady |
EventHandle |
canvas 组件初始化成功触发。 |
是 |
/ |
width |
String |
请使用 CSS width 设置 |
否 |
否 |
height |
String |
请使用 CSS height 设置 |
否 |
否 |
参数 |
类型 |
description |
touches |
Array<Touch> |
当前所有触摸点的列表 |
changedTouches |
Array<Touch> |
触发此次事件的触摸点列表 |
timeStamp |
Number |
事件触发时的时间戳 |
在触控设备上的触摸点。通常是指手指或者触控笔在触屏设备或者触摸板上的操作。
Attributes |
Description |
identifier |
Touch 对象的唯一标识符，只读属性。一次触摸动作(我们值的是手指的触摸)在平面上移动的整个过程中, 该标识符不变。可以根据它来判断跟踪的是否是同一次触摸过程。 |
x |
触点相对于屏幕左上角定点的 X 坐标。 |
y |
触点相对于屏幕左上角定点的 Y 坐标。 |
属性名 |
类型 |
描述 |
id |
String |
要获取上下文的 canvas 组件 canvas-id 属性 |
success |
Function |
获取当前上下文句柄 |
// 注意，同层渲染 Canvas请使用 onReady 事件来获取。 <canvas id="canvas" type="webgl" onReady="canvasOnReady" style=" width: 100%; height: 250px;" />
Page({ canvasOnReady() { my.createCanvas({ id: 'canvas', success: (c) => { var canvas = c; var ctx = canvas.getContext('webgl'); var height = canvas.height var width = canvas.width } }); }, })
// 注意，同层渲染 Canvas请使用 onReady 事件来获取。 <canvas id="canvas" onReady="canvasOnReady" style=" width: 100%; height: 250px;" />
Component({ canvasOnReady() { my.createCanvas({ id: 'canvas', success: (c) => { var canvas = c; var ctx = canvas.getContext('2d'); const dpr = my.getSystemInfoSync().pixelRatio canvas.width = width * dpr canvas.height = height * dpr ctx.scale(dpr, dpr) } }); }, })
创建离屏 Canvas 示例，不依赖axml文件里的组件标签描述，通过JS创建一个离屏 Canvas 对象来使用。
支持 WebGL 和 Canvas2D。
Page({ canvasOnReady() { var offscreenCanvas = my.createOffscreenCanvas(100, 100); offscreenCanvas.width = 300; offscreenCanvas.height = 300; // 使用 2D 上下文 var context2D = offscreenCanvas.getContext("2d"); // 使用 WebGL 上下文 var contextWebGL = offscreenCanvas.getContext("webgl"); // ... }); }, })
支持使用 WebGL 来加载图片，用法如下。
Component({ canvasOnReady() { var offscreenCanvas = my.createOffscreenCanvas(100, 100); offscreenCanvas.width = 300; offscreenCanvas.height = 300; var contextWebGL = offscreenCanvas.getContext("webgl"); var img = offscreenCanvas.createImage(); img.onload = function () { // gl命令 // 纹理初始化 // ... // 上传图片到纹理 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); // 其他 } img.src = "http://a.hiphotos.baidu.com/image/pic/item/838ba61ea8d3fd1fc9c7b6853a4e251f94ca5f46.jpg"; // ... }); }, })
支持 Web 标准中的?requestAnimationFrame,?cancelAnimationFrame, 用法如下：
?ps：此接口是挂在canvas对象下面的，对标h5的接口是挂载在window对象下的。
?
function draw() { var ctx = document.getElementById('canvas').getContext('webgl'); ctx.clearColor(); ctx.clear(); //对标此接口 window.requestAnimationFrame(draw); }
Component({ demo() { var that = this; my.createCanvas({ id: 'canvas', success: (c) => { that.canvas = c; gl = canvas.getContext('webgl'); c.requestAnimationFrame(draw); } }); }, draw() { // ... gl call this.canvas.requestAnimationFrame(draw); }, onReady() { this.demo(); }, });
