1. 在 WXML 文件中添加 <canvas> 组件：
<canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
在这个示例中，myCanvas 是 Canvas 组件的唯一标识。
2. 在对应的 Page 或 Component 中获取 Canvas 绘图上下文：
Page({
onReady: function() {
// 页面渲染完成时获取 Canvas 绘图上下文
const ctx = wx.createCanvasContext('myCanvas');
// 在这里进行具体的绘图操作
// 绘制完成后调用 draw() 方法，将绘制的内容显示到 Canvas 上
ctx.draw();
}
});
上述代码中，通过 wx.createCanvasContext('myCanvas') 获取了 Canvas 绘图上下文对象 ctx，然后在 onReady 生命周期中进行具体的绘图操作。最后，调用 ctx.draw() 将绘制的内容显示到 Canvas 上。
以下是一个简单的绘图示例，绘制了一个填充矩形和一段文本：
Page({
onReady: function() {
const ctx = wx.createCanvasContext('myCanvas');
// 绘制填充矩形
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 100);
// 绘制文本
ctx.setFontSize(20);
ctx.setFillStyle('blue');
ctx.fillText('Hello, Canvas!', 30, 50);
// 将绘制的内容显示到 Canvas 上
ctx.draw();
}
});
在实际开发中，可以根据需求使用 CanvasContext 提供的方法进行更复杂的绘图操作，包括绘制图形、设置样式、添加事件等。
转载请注明出处：http://www.zyzy.cn/article/detail/972/微信小程序