canvas画左右正负极半圆仪表盘

以下是一个简单的示例代码，实现了一个带有左右正负极半圆的仪表盘：

<canvas id="myCanvas" width="400" height="200"></canvas>

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

// 画左侧半圆
ctx.beginPath();
ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * 0.5);
ctx.lineWidth = 20;
ctx.strokeStyle = "#FF0000";
ctx.stroke();

// 画右侧半圆
ctx.beginPath();
ctx.arc(300, 100, 80, Math.PI * 0.5, Math.PI * 1.5);
ctx.lineWidth = 20;
ctx.strokeStyle = "#00FF00";
ctx.stroke();

// 画中心圆
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "#0000FF";
ctx.fill();

此代码创建了一个大小为 400x200 的 canvas 元素，并使用 getContext() 方法获取绘图上下文。然后，分别使用 arc() 方法绘制了左右侧的半圆，使用 lineWidth 和 strokeStyle 属性设置线条的宽度和颜色，并调用 stroke() 方法绘制线条。

最后，使用 arc() 方法绘制了中心圆，并使用 fillStyle 属性设置颜色，调用 fill() 方法填充颜色。