我们支持 WebGL1.0 和 Canvas2D API；同时，也支持创建离屏 Canvas 对象。
注意：
1、请开发者自行根据使用场景选择使用。
2、my.createOffscreenCanvas暂不支持高性能模式。
请在 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();
},
});
