我的問題是我的甜甜圈圖沒有按我想要的那樣工作。我想創建一個像這樣的甜甜圈圖：但我的甜甜圈圖現在看起來像這樣：如您所見，筆畫不會在正確的方向上重疊。我想這可能是因為我開始從右到左畫筆畫。相反，它應該從左到右繪制它們，因此左側的“圓形末端”是可見的，而不是右側的圓形末端。這是我到目前為止所嘗試的：//function to draw the donut chart, ctx = context, cx - cy = position, radius and arcwithdmbChart(ctx, cx, cy, radius, arcwidth) {   var tot = 0;   var accum = 0;   var PI = Math.PI;   var PI2 = PI * 2;   var offset = -PI/2;   for(var i = 0; i < this.canvasValues.length; i++) {     tot += this.canvasValues[i];   }     //Donut Sectors Color: Draw each stroke based on the value (canvasValues) and Color (canvasColors)   for(var i = 0; i < this.canvasValues.length; i++) {    ctx.lineWidth = arcwidth;    ctx.beginPath();    ctx.lineCap = "round";    ctx.arc(cx, cy, radius, offset + PI2 * (accum/tot), offset + PI2 * ((accum + this.canvasValues[i]) / tot));    ctx.strokeStyle = this.canvasColors[i];    ctx.stroke();     accum += this.canvasValues[i];   } }正如你所看到的，我得到的值是每個筆畫的長度和顏色的百分比。從頂部開始，我從頂部 -> 右側 -> 底部 -> 左側繪制每個，這就是結果。但是我怎樣才能修改它以獲得最上面的結果呢？編輯： 在@Helder Sepulveda 的幫助下，我現在這樣創建了它。我更改了很多計算，修復了更改帶來的一些錯誤?，F在唯一的問題是它沒有開始在頂部繪制。如您所見，綠色筆劃應從頂部開始：function dmbChart(ctx, cx, cy, radius, arcwidth) {   var canvasValues =  [30, 5, 15, 10, 10, 10, 10, 10];  var canvasColors = ["#10dc60", "#DDDDDD", "#0cd1e8", "#ffce00", "#7044ff", "#f04141", "#ffea00", "#ee82ee"];  ctx.lineWidth = arcwidth;  ctx.lineCap = "round";     var accum = canvasValues.reduce((a,b) => a + b, 0);    for (var i = canvasValues.length-1; i >= 0; i--) {    var radians = canvasValues[i] / 100 * 360 * Math.PI / 180    ctx.beginPath();    ctx.arc(cx, cy, radius, accum, accum - radians, true);    ctx.strokeStyle = canvasColors[i];    ctx.stroke();        accum -= radians;  }    ctx.beginPath();  ctx.arc(cx, cy, radius, accum, accum - (0.1 / 100 * 360 * Math.PI / 180), true);    ctx.strokeStyle = canvasColors[canvasColors.length - 1];  ctx.stroke();}