1. setStrokeStyle(color):
- 设置描边颜色。
- color 参数可以是表示颜色的字符串,例如 'red'、'#00ff00' 等。
const ctx = wx.createCanvasContext('myCanvas');
ctx.setStrokeStyle('blue');
2. setLineWidth(width):
- 设置线条宽度。
- width 参数为正整数,表示线条的宽度。
const ctx = wx.createCanvasContext('myCanvas');
ctx.setLineWidth(2);
3. setLineCap(lineCap):
- 设置线条的端点样式。
- lineCap 参数可以是 'butt'(默认)、'round'、'square'。
const ctx = wx.createCanvasContext('myCanvas');
ctx.setLineCap('round');
4. setLineJoin(lineJoin):
- 设置线条连接样式。
- lineJoin 参数可以是 'bevel'、'round'、'miter'(默认)。
const ctx = wx.createCanvasContext('myCanvas');
ctx.setLineJoin('round');
上述方法可以在绘制路径之前设置,以影响后续路径的绘制。以下是一个完整的示例,演示了如何设置线条样式并绘制一条路径:
const ctx = wx.createCanvasContext('myCanvas');
// 设置线条样式
ctx.setStrokeStyle('blue');
ctx.setLineWidth(2);
ctx.setLineCap('round');
ctx.setLineJoin('round');
// 开始绘制路径
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
// 描边路径
ctx.stroke();
// 绘制
ctx.draw();
在上述示例中,设置了线条的颜色为蓝色,宽度为2,端点样式为圆形,连接样式为圆角。然后通过 moveTo 和 lineTo 方法绘制路径,并通过 stroke 方法描边路径。
转载请注明出处:http://www.zyzy.cn/article/detail/977/微信小程序