uniapp canvas 如何绘制圆环

在uniapp中使用canvas绘制圆环时，应该怎么实现？我尝试了arc方法但无法控制圆环的粗细，请问有没有完整的代码示例或具体的参数设置方法？需要实现一个可自定义颜色和宽度的圆环效果。

2 回复

在uniapp的canvas中绘制圆环，可以使用arc方法。先画一个完整圆，再设置lineWidth为环宽，用stroke描边即可。

示例代码：

const ctx = uni.createCanvasContext('myCanvas');
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.setLineWidth(10);
ctx.stroke();
ctx.draw();

在 UniApp 中使用 Canvas 绘制圆环，可以通过 uni.createCanvasContext 创建画布上下文，然后使用 arc 方法绘制圆形路径，并通过设置线条宽度和颜色来实现圆环效果。以下是具体代码示例：

  1. HTML 结构（在 .vue 文件的 template 部分）：
<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  1. JavaScript 逻辑（在 script 部分）：
export default {
  onReady() {
    const ctx = uni.createCanvasContext('myCanvas'); // 创建画布上下文
    const x = 150; // 圆心x坐标
    const y = 150; // 圆心y坐标
    const radius = 80; // 圆半径
    const lineWidth = 10; // 圆环线条宽度

    // 绘制圆环
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI); // 绘制完整圆形路径
    ctx.setLineWidth(lineWidth);
    ctx.setStrokeStyle('#007AFF'); // 设置圆环颜色，例如蓝色
    ctx.stroke(); // 描边路径，形成圆环
    ctx.draw(); // 将绘制内容输出到画布
  }
};

关键点说明：

  • 使用 arc(x, y, radius, startAngle, endAngle) 绘制圆形路径，startAngle 设为 0，endAngle 设为 2 * Math.PI 表示完整圆。
  • 通过 setLineWidth 设置线条宽度，宽度越大圆环越粗。
  • setStrokeStyle 定义圆环颜色，stroke() 执行描边而非填充，从而形成空心圆环。
  • 最后调用 draw() 将内容渲染到画布上。

调整圆环：

  • 要绘制部分圆环（如进度环），可修改 endAngle 值（例如 1.5 * Math.PI 表示 3/4 圆）。
  • 可通过 setLineCap 设置线条末端样式（如圆形末端）。

此方法简单高效，适用于 UniApp 的 Canvas 组件。

回到顶部