推荐答案
// www.javascriptcn.com code example
// 1. 获取 canvas 上下文
const ctx = wx.createCanvasContext('myCanvas');
// 2. 绘制矩形
ctx.fillStyle = '#FF0000'; // 设置填充颜色
ctx.fillRect(10, 10, 100, 50); // 绘制填充矩形
// 3. 绘制圆形
ctx.beginPath(); // 开始路径
ctx.arc(200, 50, 30, 0, 2 * Math.PI); // 绘制圆形
ctx.fillStyle = '#00FF00'; // 设置填充颜色
ctx.fill(); // 填充圆形
// 4. 绘制线条
ctx.beginPath(); // 开始路径
ctx.moveTo(10, 100); // 移动到起点
ctx.lineTo(200, 100); // 绘制线条
ctx.strokeStyle = '#0000FF'; // 设置线条颜色
ctx.stroke(); // 绘制线条
// 5. 绘制文本
ctx.setFontSize(20); // 设置字体大小
ctx.fillText('Hello, Canvas!', 10, 150); // 绘制文本
// 6. 提交绘制
ctx.draw();本题详细解读
1. 获取 canvas 上下文
在微信小程序中，首先需要通过 wx.createCanvasContext 方法获取 canvas 的上下文对象。这个上下文对象包含了所有绘制图形的方法和属性。
const ctx = wx.createCanvasContext('myCanvas');2. 绘制矩形
使用 fillRect 方法可以绘制一个填充矩形。fillStyle 属性用于设置填充颜色。
ctx.fillStyle = '#FF0000'; // 设置填充颜色为红色 ctx.fillRect(10, 10, 100, 50); // 在 (10, 10) 位置绘制一个 100x50 的矩形
3. 绘制圆形
绘制圆形需要使用 arc 方法，并通过 fill 方法填充颜色。beginPath 方法用于开始一个新的路径。
ctx.beginPath(); // 开始路径 ctx.arc(200, 50, 30, 0, 2 * Math.PI); // 在 (200, 50) 位置绘制半径为 30 的圆形 ctx.fillStyle = '#00FF00'; // 设置填充颜色为绿色 ctx.fill(); // 填充圆形
4. 绘制线条
绘制线条需要使用 moveTo 和 lineTo 方法，并通过 stroke 方法绘制线条。strokeStyle 属性用于设置线条颜色。
ctx.beginPath(); // 开始路径 ctx.moveTo(10, 100); // 移动到起点 (10, 100) ctx.lineTo(200, 100); // 绘制到 (200, 100) 的线条 ctx.strokeStyle = '#0000FF'; // 设置线条颜色为蓝色 ctx.stroke(); // 绘制线条
5. 绘制文本
使用 fillText 方法可以在 canvas 上绘制文本。setFontSize 方法用于设置字体大小。
ctx.setFontSize(20); // 设置字体大小为 20
ctx.fillText('Hello, Canvas!', 10, 150); // 在 (10, 150) 位置绘制文本6. 提交绘制
最后，使用 draw 方法提交所有的绘制操作，将图形显示在 canvas 上。
ctx.draw();