微信小程序绘制半圆(弧形)进度条
时间: 2023-03-25 14:01:37 浏览: 296
微信小程序可拖动半圆进度条
可以使用 canvas 绘制半圆进度条,具体实现可以参考以下代码:
```
<canvas canvas-id="progress" style="width: 200px; height: 200px;"></canvas>
// JS 代码
const ctx = wx.createCanvasContext('progress');
const centerX = 100; // 圆心 x 坐标
const centerY = 100; // 圆心 y 坐标
const radius = 80; // 半径
const startAngle = -Math.PI / 2; // 起始角度
const endAngle = Math.PI * 2 * progress - Math.PI / 2; // 结束角度,progress 为进度值,取值范围为 到 1
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
ctx.setStrokeStyle('#00ff00'); // 进度条颜色
ctx.setLineWidth(10); // 进度条宽度
ctx.stroke();
ctx.draw();
```
其中,canvas-id 为 canvas 组件的唯一标识符,style 中设置 canvas 的宽高,ctx 为 canvas 绘图上下文,通过调用其 API 实现绘制。
阅读全文