基础库 或更高版本； 若版本较低，建议采取 兼容处理 。
主体： 企业支付宝小程序 、 个人支付宝小程序
属性
| 名称 | 类型 | 只读 | 功能说明 |
|---|---|---|---|
| width | number | 否 | 画布图像大小的宽度。 |
| height | number | 否 | 画布图像大小的高度。 |
方法
| 名称 | 类型 | 功能说明 |
|---|---|---|
| canvas.getcontext | function | 返回 canvas 的绘制上下文。 |
| canvas.createimage | function | 创建图片对象，支持 2dcanvas 和 webgl canvas 使用。 |
| canvas.requestanimationframe | function | 帧调用，下次重绘之前调用指定的回调函数。 |
| canvas.cancelanimationframe | function | 取消 requestanimationframe 添加的动画帧请求。 |
| canvas.totempfilepath | function | 把当前画布指定区域的内容导出生成指定大小的图片。 |
代码示例
.axml
.js
<canvas id="canvas" type="2d" onready="oncanvasready">canvas>
page({
// 一定要在 canvas 的 onready 中调用，否则获取到的 context 可能不正确
oncanvasready() {
// 通过 selectorquery 获取 canvas 实例
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getcontext('2d')
console.log('canvas 宽高', canvas.width, canvas.height)
// 开始绘画
ctx.fillrect(0, 0, 50, 50)
})
},
})
如果您的项目中已使用类似 这样未指定 type 的标签，请参考 旧版 canvas 迁移指南 。
q：我想在画布中绘制内容，应该看哪个文档呢？
a：
进行 2d 绘制可参阅 canvasrenderingcontext2d 概览。基于 webgl 绘制可参阅 。