canvas画半圆正负仪表盘

你可以使用以下代码来画一个半圆的正负仪表盘：

<canvas id="canvas"></canvas>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var centerX = canvas.width / 2;
var centerY = canvas.height;
var radius = canvas.height / 2;

// 绘制底部的半圆
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI, 2 * Math.PI);
context.lineWidth = 10;
context.strokeStyle = "#e6e6e6";
context.stroke();

// 绘制正面的半圆
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI, Math.PI + Math.PI * 0.8);
context.lineWidth = 10;
context.strokeStyle = "#00ff00";
context.stroke();

// 绘制负面的半圆
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI, Math.PI - Math.PI * 0.8, true);
context.lineWidth = 10;
context.strokeStyle = "#ff0000";
context.stroke();

在上述代码中，我们首先获取了 Canvas 元素和绘制上下文对象。接着，我们定义了圆心坐标和半径。在绘制底部的半圆时，我们使用了 `Math.PI` 和 `2 * Math.PI` 来确定圆弧的起始角度和结束角度，从而绘制了一个半圆的底部。

接下来，我们使用 `Math.PI` 和 `Math.PI + Math.PI * 0.8` 来确定圆弧的起始角度和结束角度，绘制了一个正面的半圆。其中，`Math.PI * 0.8` 代表了半圆的角度大小。

最后，我们使用 `Math.PI` 和 `Math.PI - Math.PI * 0.8, true` 来确定圆弧的起始角度和结束角度，并将 `true` 传递给 `arc()` 方法的第三个参数，从而绘制了一个负面的半圆。