canvas画半圆进度条中间是0刻度往左是负值往右是正值

要实现这个效果，你可以先画一个半圆，然后在圆心处绘制一个0刻度线，再在圆弧上绘制进度条。

具体步骤如下：

1. 创建一个 canvas 元素，并获取它的上下文对象。

2. 通过上下文对象的 arc 方法绘制一个半圆，可以通过修改圆心和半径来调整半圆的位置和大小。

3. 绘制0刻度线，可以通过上下文对象的 moveTo 和 lineTo 方法实现。

4. 根据当前进度值计算圆弧的终点坐标，绘制进度条，可以通过上下文对象的 arc 方法实现。

5. 绘制进度条的颜色和宽度，可以通过修改上下文对象的 fillStyle 和 lineWidth 属性实现。

下面是一个示例代码：

<canvas id="progress" width="200" height="100"></canvas>

const canvas = document.getElementById('progress');
const ctx = canvas.getContext('2d');

// 半圆的圆心和半径
const centerX = canvas.width / 2;
const centerY = canvas.height;
const radius = canvas.height;

// 计算圆弧的起点和终点角度
const startAngle = Math.PI;
const endAngle = Math.PI * 2;

// 画半圆
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.stroke();

// 画0刻度线
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX - radius, centerY);
ctx.stroke();

// 绘制进度条
const progress = 0.5; // 进度值，范围为0到1
const progressAngle = progress * Math.PI; // 计算圆弧的角度
const progressEndX = centerX + Math.cos(startAngle + progressAngle) * radius;
const progressEndY = centerY + Math.sin(startAngle + progressAngle) * radius;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, startAngle + progressAngle);
ctx.lineWidth = 10; // 进度条宽度
ctx.strokeStyle = '#ff0000'; // 进度条颜色
ctx.stroke();

这段代码会画出一个半径为100的半圆，圆心在canvas的中心，0刻度线在圆心往左，宽度为10的红色进度条从0刻度开始向右延伸。你可以根据实际需求修改代码。