javascript - 如何绘制椭圆的一部分？ (0-100%)

Question

我想在给定 cx 和 cy 位置属性以及椭圆本身的宽度和高度属性的情况下绘制一个椭圆。

您可以在下面找到此设置的一些工作代码:

---

但现在我想通过绘制椭圆的百分比(从 0 到 100)而不是整个椭圆来生成一种“进度显示”。

我在这里附上一张图片来说明整个事情:

我真的不知道该怎么做。我更喜欢无需调整 Canvas 大小的解决方案 - 仅出于性能原因，我希望有人知道如何解决我的问题。

let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d");

canvas.width = 400;
canvas.height = 280;
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height)

let ellipse = function(cx, cy, w, h) {
  let lx = cx - w / 2,
    rx = cx + w / 2,
    ty = cy - h / 2,
    by = cy + h / 2;
  let magic = 0.551784;
  let xmagic = magic * w / 2,
    ymagic = h * magic / 2;
  let region = new Path2D();
  region.moveTo(cx, ty);
  region.bezierCurveTo(cx + xmagic, ty, rx, cy - ymagic, rx, cy);
  region.bezierCurveTo(rx, cy + ymagic, cx + xmagic, by, cx, by);
  region.bezierCurveTo(cx - xmagic, by, lx, cy + ymagic, lx, cy);
  region.bezierCurveTo(lx, cy - ymagic, cx - xmagic, ty, cx, ty);

  ctx.strokeStyle = "red";
  ctx.lineWidth = "10";
  region.closePath();
  ctx.stroke(region);
}

ellipse(canvas.width / 2, canvas.height / 2, 300, 120)

<canvas id="canvas"></canvas>

Answer 1

您可以使用内置函数 ctx.ellipse - 首先我们把绿线画成一个完整的椭圆。接下来，在顶部绘制红色的部分椭圆:

let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d");

canvas.width = 400;
canvas.height = 280;
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height)

function ellipse(ctx, color, x,y, w, h, thickness, angle) {    
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.ellipse(canvas.width / 2, canvas.height / 2, h/2,w/2, Math.PI*3/2, 0, angle);
    ctx.lineWidth = thickness;
    ctx.stroke();
}

function ell(percent) {
    let x= canvas.width / 2;
    let y= canvas.height / 2;
    let w=300;
    let h=120;
    let th = 10; // example thickness 10px
    ellipse(ctx, '#608a32', x,y, w, h, th, Math.PI*2);
    ellipse(ctx, '#ed3833', x,y , w, h, th+.3, 2*Math.PI*percent/100);
    
}

ell(90);   // here we start draw for 90%

<canvas id="canvas"></canvas>