我们支持 WebGL1.0 和 Canvas2D API；同时，也支持创建离屏 Canvas 对象。
注：请开发者自行根据使用场景选择使用。
请在 app.json 里添加 enableSkia 配置：
{ "pages": [ "pages/index/index" ], "window": { "defaultTitle": "My App", "enableSkia":"true" } }
同层渲染 Canvas 为保证 Canvas 组件准确被创建，请在Canvas标签上绑定 onReady 事件，以保证时序。
支持 WebGL 和 Canvas2D。
属性名 |
类型 |
默认值 |
描述 |
id |
String |
组件唯一标识符 |
|
style |
String |
||
class |
String |
||
width |
String |
canvas width attribute |
|
height |
String |
canvas height attribute |
|
type |
String |
Web Canvas下无效。同层渲染 Canvas 下只支持webgl，默认为canvas2d。 |
|
onTap |
EventHandle (function callback) |
点击 |
|
onTouchStart |
EventHandle (function callback) |
触摸动作开始 |
|
onTouchMove |
EventHandle (function callback) |
触摸后移动 |
|
onTouchEnd |
EventHandle (function callback) |
触摸动作结束 |
|
onTouchCancel |
EventHandle (function callback) |
触摸动作被打断，如来电提醒，弹窗 |
|
onLongTap |
EventHandle (function callback) |
长按 500ms 之后触发，触发了长按事件后进行移动将不会触发屏幕的滚动 |
参数 |
类型 |
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;" />
Page({ 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({ onReady() { 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 来加载图片，用法如下：
Page({ onReady() { 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); }
示范代码
Page({ 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(); }, });
