javascript - 如何在 html canvas 中用颜色填充一定比例的圆圈区域？

Question

我的 html 页面中有大约 9 个圆圈。每个圆圈必须以一定百分比填充特定颜色。我使用 html5 canvas 元素绘制了圆圈。但我只能用一种颜色填充整个圆圈，不是特定的百分比区域。我怎样才能做到这一点？

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>

饼图类型

• 移动到圆心
• 添加圆弧，这将创建一条从中心到圆弧起点的线
• 关闭路径，这将创建一条从弧的末端回到中心的线，并填充

(提示: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>

轮廓圆:

与饼图类型几乎相同，但有以下变化:

• 以 Angular 0(或您要开始的 Angular )移动到圆弧的外边缘
• 向路径添加圆弧
• 描边(记得设置lineWidth，看下面的demo)

重要部分:

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();

您可以使用旋转变换或使用三 Angular 函数计算实际点来调整间隙点。

演示

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>

使用不同的起点

您可以使用旋转变换或使用三 Angular 函数手动计算点来更改圆弧的起点。

要手动计算这些，您可以这样做(以弧度为单位的 Angular ):

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

只需将总 Angular 与起始 Angular 相加即可得到终点。

以弧度表示的 360° = 2 x PI，因此如果您想使用以度为单位的 Angular ，请使用以下方式转换它们:

angleInRad = angleInDeg * Math.PI / 180;

Demo，使用transfrom和counter-clock-wise模式旋转

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>