如何使用HTML画布将半圆形区域划分为彩色段

试图在HTML画布中将半圆形区域划分为彩色段。 这是我试过的

            ctx.save();
            ctx.translate(c.width / 2, (c.height / 2)-1);
            ctx.strokeStyle = "red"
            ctx.lineWidth = 3;
            ctx.lineCap = "round";
            var x=400; // number of times lineTo strokes. Greater the value the better is the smoothness
            var factor=1;   //with =1, the entire semicirular region is filled.
            for (var i = 0; i < x; i++) { 
                 //ctx.rotate(Math.PI);
                ctx.beginPath();

                ctx.strokeStyle = "rgba(255,0,0,1)";
                //ctx.rotate(-Math.PI/2);

                ctx.rotate((-Math.PI * factor) / x); 
                //1st color segment, factor=1 helps to paint 100% of semicircular region

                ctx.moveTo(122, 0);
                ctx.lineTo(70, 0);
                ctx.stroke();
                //ctx.rotate(Math.PI); //2nd color segment

ctx.save（）；
ctx.平移（c.宽度/2，（c.高度/2）-1）；
ctx.strokeStyle=“红色”
ctx.lineWidth=3；
ctx.lineCap=“圆形”；
变量x=400；//线条到笔划的次数。该值越大，平滑度越好
var系数=1//如果=1，则填充整个半圆区域。
对于（var i=0；i

另一种方法，可能是使用同心圆弧（）段。我现在正在尝试。但任何一个能够投射光线的人都会帮上大忙。

我正在寻找的就是这个示例。

---

如我所料，使用同心圆弧（）。

您基本上要求的是饼图，对吗？