1. 在页面的 wxml 文件中添加 canvas 组件。
<canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
2. 在页面的 js 文件中添加绘制的逻辑。
Page({
onReady: function () {
// 获取 canvas 组件的上下文
const ctx = wx.createCanvasContext('myCanvas');
// 绘制一个矩形
ctx.setFillStyle('#f00'); // 设置填充颜色为红色
ctx.fillRect(50, 50, 200, 100); // 绘制矩形，起始点为 (50, 50)，宽度为 200，高度为 100
// 绘制一条线
ctx.setStrokeStyle('#00f'); // 设置线条颜色为蓝色
ctx.setLineWidth(2); // 设置线条宽度为2
ctx.moveTo(50, 150); // 设置起始点
ctx.lineTo(250, 150); // 设置终点
ctx.stroke(); // 绘制线条
// 绘制文字
ctx.setFillStyle('#000'); // 设置文字颜色为黑色
ctx.setFontSize(16); // 设置字体大小
ctx.fillText('Hello, Canvas!', 80, 180); // 绘制文字，起始点为 (80, 180)
// 结束绘制
ctx.draw();
},
});
在这个示例中，我们通过 wx.createCanvasContext 获取到 canvas 组件的上下文，然后使用上下文对象 ctx 进行绘制操作。具体的绘制操作包括绘制矩形、线条和文字。
这只是一个简单的演示，你可以根据实际需求进一步扩展和定制绘制的内容。在实际开发中，你可能会涉及到更复杂的绘图需求，可以使用 ctx 提供的各种方法进行路径绘制、渐变、图像绘制等操作。在使用 canvas 组件时，请注意适应不同屏幕的尺寸和密度，以确保绘制效果的一致性。
转载请注明出处：http://www.zyzy.cn/article/detail/1353/微信小程序