如何在html畫布中填充顏色圓的某個百分比區域？

Question

我的html頁面中有9個圓圈。每個圓圈都必須用一定的百分比填充某些顏色。我使用html5畫布元素繪制了圓圈。但我只能用顏色填充整個圓圈而不是某些優點area.How我可以實現嗎？

Answer 1

“油箱”，圓圈填充

使用復合模式：

• 使用半徑x2表示高度（或寬度）
• 繪制並填充整個圓圈
• 使用復合模式destination-out
• 在頂部繪制一個填充矩形，表示高度的百分比

主要代碼是：

  var o = radius * 2,                 // diameter => width and height of rect
      h = o - (o * percent / 100);    // height based on percentage

  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 6.28);
  ctx.fill();

  ctx.globalCompositeOperation = "destination-out";
  ctx.fillRect(x - radius, y - radius, o, h);       // this will remove a part of the top

演示

 var ctx = document.querySelector("canvas").getContext("2d"), pst = 0, dlt = 2; ctx.fillStyle = "#28f"; function drawCircle(ctx, x, y, radius, percent) { var o = radius * 2, h = o - (o * percent / 100); ctx.globalCompositeOperation = "source-over"; // make sure we have default mode ctx.beginPath(); // fill an arc ctx.arc(x, y, radius, 0, 6.28); ctx.fill(); ctx.globalCompositeOperation = "destination-out"; // mode to use for next op. ctx.fillRect(x - radius, y - radius, o, h); // "clear" part of arc ctx.globalCompositeOperation = "source-over"; // be polite, set default mode back } (function loop() { ctx.clearRect(0,0,300,150); drawCircle(ctx, 70, 70, 60, pst); pst += dlt; if (pst <= 0 || pst >= 100) dlt = -dlt; requestAnimationFrame(loop); })(); 

 <canvas></canvas> 

餡餅類型

• 移動到圓心
• 添加弧，這將創建從中心到弧的起點的線
• 關閉路徑，這將創建一條從弧端返回到中心的線，並填充

（tip： closePath()實際上不需要fill()因為fill()會關閉隱含的路徑，但是如果你想做一個stroke()則需要它。

關鍵部分是：

ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, radius, 0, 2 * Math.PI * percent / 100);
//ctx.closePath();  // for stroke, not needed for fill
ctx.fill();

演示

 var ctx = document.querySelector("canvas").getContext("2d"), pst = 0, dlt = 2; ctx.fillStyle = "#28f"; function drawPie(ctx, x, y, radius, percent) { ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, radius, 0, 2 * Math.PI * percent /100); ctx.fill(); } (function loop() { ctx.clearRect(0,0,300,150); drawPie(ctx, 70, 70, 60, pst); pst += dlt; if (pst <= 0 || pst >= 100) dlt = -dlt; requestAnimationFrame(loop); })(); 

 <canvas></canvas> 

概述圓圈：

與派對類型幾乎相同，但有以下更改：

• 以角度0（或您想要從的角度）移動到弧的外邊緣
• 將弧添加到路徑
• 筆畫（記得設置lineWidth ，見下面的演示）

重要組成部分：

ctx.beginPath();
ctx.moveTo(x + radius, y);  // cos(0) for x = 1, so just use radius, sin(0) = 0
ctx.arc(x, y, radius, 0, 2 * Math.PI * percent /100);
ctx.stroke();

您可以使用旋轉變換調整間隙點或使用三角法計算實際點。

演示

 var ctx = document.querySelector("canvas").getContext("2d"), pst = 0, dlt = 2; ctx.strokeStyle = "#28f"; ctx.lineWidth = 8; function drawWedge(ctx, x, y, radius, percent) { ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.arc(x, y, radius, 0, 2 * Math.PI * percent /100); ctx.stroke(); } (function loop() { ctx.clearRect(0,0,300,150); drawWedge(ctx, 70, 70, 60, pst); pst += dlt; if (pst <= 0 || pst >= 100) dlt = -dlt; requestAnimationFrame(loop); })(); 

 <canvas></canvas> 

使用不同的起點

您可以使用旋轉變換或使用三角函數手動計算點來更改圓弧的起點。

要手動計算這些，你可以做（​​弧度角）：

x = radius * Math.cos(angleInRad);  // end point for x
y = radius * Math.sin(angleInRad);  // end point for y

只需將總角度添加到起始角度即可獲得終點。

360°弧度= 2 x PI，因此如果您想使用度數角度，請使用以下方法進行轉換：

angleInRad = angleInDeg * Math.PI / 180;

演示，使用transfrom和逆時針方式旋轉

 var ctx = document.querySelector("canvas").getContext("2d"), pst = 0, dlt = 2; ctx.strokeStyle = "#28f"; ctx.lineWidth = 8; function drawWedge(ctx, x, y, radius, percent) { ctx.translate(x, y); // translate to rotating pivot ctx.rotate(Math.PI * 0.5); // rotate, here 90° deg ctx.translate(-x, -y); // translate back ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.arc(x, y, radius, 0, 2 * Math.PI * percent /100); ctx.stroke(); ctx.setTransform(1,0,0,1,0,0); // reset transform } (function loop() { ctx.clearRect(0,0,300,150); drawWedge(ctx, 70, 70, 60, pst); pst += dlt; if (pst <= 0 || pst >= 100) dlt = -dlt; requestAnimationFrame(loop); })(); 

 <canvas></canvas>