// 获取上下文
const context = wx.createCanvasContext('myCanvas');
// 定义矩形的位置和尺寸
const x = 50; // 矩形左上角 x 坐标
const y = 50; // 矩形左上角 y 坐标
const width = 100; // 矩形宽度
const height = 80; // 矩形高度
// 使用 rect 方法绘制矩形
context.rect(x, y, width, height);
// 设置矩形的样式
context.setFillStyle('red'); // 设置填充颜色
context.setStrokeStyle('blue'); // 设置边框颜色
// 填充矩形
context.fill();
// 描边矩形
context.stroke();
// 绘图上下文的渲染
context.draw();
在上述代码中,我们首先使用 rect 方法定义了矩形的位置和尺寸,然后使用 setFillStyle 和 setStrokeStyle 方法设置了矩形的填充颜色和边框颜色。最后,使用 fill 方法填充矩形,使用 stroke 方法描边矩形,最终通过 draw 方法将绘制的内容渲染到Canvas上。
你可以根据需要调整矩形的位置、尺寸以及样式属性。
转载请注明出处:http://www.zyzy.cn/article/detail/985/微信小程序