Javascript 如何在html画布中填充一定百分比的彩色圆圈区域？

我的html页面中有大约9个圆圈。每个圆圈都必须用特定的颜色和一定的百分比填充。我使用html5画布元素绘制了圆圈。但我只能用颜色填充enitre圆圈，而不能填充特定的百分比区域。我如何才能做到这一点？

“燃油箱”，填充圆圈 使用复合模式：

• 使用半径x2表示高度（或宽度）
• 画并填充整个圆圈
• 使用复合模式

  目的地输出

• 在顶部绘制一个填充矩形，表示高度的百分比

主要代码是：

  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”；
函数绘图圆（ctx、x、y、半径、百分比）{
var o=半径*2，
h=o-（o*百分比/100）；
ctx.globalCompositeOperation=“source over”；//确保我们有默认模式
ctx.beginPath（）；//填充圆弧
弧（x，y，半径，0，6.28）；
ctx.fill（）；
ctx.globalCompositeOperation=“destination out”//用于下一次操作的模式。
ctx.fillRect（x-半径，y-半径，o，h）；//弧的“净”部分
ctx.globalCompositeOperation=“source over”//礼貌一点，将默认模式设置回原位
}
（函数循环（）{
ctx.clearRect（0,0300150）；
拉丝圈（ctx、70、70、60、pst）；
pst+=dlt；
如果（pst=100）dlt=-dlt；
请求动画帧（循环）；
})();
使用圆弧法。听起来他们想要一个带楔块的圆，表示完成百分比。可能是这样的，但用楔子代替圆弧：。。。只是猜测：-/