1. wx.createCanvasContext(canvasId, this)：
- 创建 Canvas 绘图上下文，需要提供一个 canvasId，表示 Canvas 组件的唯一标识。
- 可以通过该方法获取 Canvas 绘图上下文对象，用于后续的绘图操作。
const ctx = wx.createCanvasContext('myCanvas');
2. 样式设置：
- setFillStyle(color)：设置填充颜色。
- setStrokeStyle(color)：设置描边颜色。
- setGlobalAlpha(alpha)：设置绘图的透明度。
- setLineWidth(width)：设置线条宽度。
ctx.setFillStyle('red');
ctx.setStrokeStyle('#00ff00');
ctx.setGlobalAlpha(0.5);
ctx.setLineWidth(2);
3. 绘制形状：
- fillRect(x, y, width, height)：绘制填充矩形。
- strokeRect(x, y, width, height)：绘制描边矩形。
- clearRect(x, y, width, height)：清除矩形区域。
ctx.fillRect(10, 10, 150, 100);
ctx.strokeRect(10, 10, 150, 100);
ctx.clearRect(20, 20, 130, 80);
4. 绘制路径：
- beginPath()：开始一个新路径。
- moveTo(x, y)：将路径移动到指定点。
- lineTo(x, y)：绘制直线路径到指定点。
- arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制圆弧路径。
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
5. 文本绘制：
- setFont(font)：设置字体样式。
- setFontSize(fontSize)：设置字体大小。
- fillText(text, x, y)：绘制填充文本。
- strokeText(text, x, y)：绘制描边文本。
ctx.setFont('italic bold 20px Arial');
ctx.setFontSize(20);
ctx.fillText('Hello, World!', 50, 50);
ctx.strokeText('Hello, World!', 50, 80);
6. 图片绘制：
- drawImage(imageResource, x, y, width, height)：绘制图片。
ctx.drawImage('path/to/image.jpg', 10, 10, 150, 100);
7. 保存和恢复状态：
- save()：保存当前绘图上下文的状态。
- restore()：恢复之前保存的绘图上下文的状态。
ctx.save();
// 在此进行绘图操作
ctx.restore();
这些是 CanvasContext 的一些常用方法，你可以根据实际需求使用这些方法进行绘图操作。
转载请注明出处：http://www.zyzy.cn/article/detail/971/微信小程序