canvas
画布。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| type | String | 否 | 指定 canvas 类型，支持 2d 和 webgl | ||
| canvas-id | String | 否 | canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 | ||
| disable-scroll | Boolean | false | 否 | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 | |
| binderror | EventHandle | 否 | 当发生错误时触发 error 事件，detail = {errMsg} |
Canvas 2D
示例代码：
<canvas type="2d" id="myCanvas"></canvas>
Page({
onReady() {
const query = mc.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = mc.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.fillRect(0, 0, 100, 100)
})
}
})
WebGL
示例代码：
<canvas type="webgl" id="myCanvas"></canvas>
Page({
onReady() {
const query = mc.createSelectorQuery()
query.select('#myCanvas').node().exec((res) => {
const canvas = res[0].node
const gl = canvas.getContext('webgl')
gl.clearColor(1, 0, 1, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
})
}
})