微信小程序API 绘图·设置线条宽度

在微信小程序的 Canvas 绘图中，你可以使用 setLineWidth 方法设置线条的宽度。以下是使用该方法的基本示例：

1. 创建 Canvas 组件：

在 WXML 文件中添加 <canvas> 组件，为其设置唯一标识。

   <canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>

2. 获取 Canvas 绘图上下文：

在对应的 Page 或 Component 中获取 Canvas 绘图上下文对象。

   Page({
     onReady: function() {
       const ctx = wx.createCanvasContext('myCanvas');

       // 在这里进行具体的绘图操作
     }
   });

3. 设置线条宽度：

使用 setLineWidth 方法设置线条的宽度。参数为正整数，表示线条的宽度。

   const ctx = wx.createCanvasContext('myCanvas');
   ctx.setLineWidth(2);

4. 绘制路径并描边：

在设置线条宽度后，可以使用绘图方法绘制路径，并使用 stroke 方法描边。

   ctx.beginPath();
   ctx.moveTo(50, 50);
   ctx.lineTo(150, 50);
   ctx.lineTo(150, 150);
   ctx.closePath();

   // 描边路径
   ctx.stroke();

在上述代码中，绘制了一个路径，然后使用 stroke 方法描边。

以下是一个完整的示例，演示了如何设置线条宽度并描边一个路径：

Page({
  onReady: function() {
    const ctx = wx.createCanvasContext('myCanvas');

    // 设置线条宽度
    ctx.setLineWidth(2);

    // 开始绘制路径
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(150, 50);
    ctx.lineTo(150, 150);
    ctx.closePath();

    // 描边路径
    ctx.stroke();

    // 绘制
    ctx.draw();
  }
});

转载请注明出处：http://www.zyzy.cn/article/detail/981/微信小程序