如何绘制椭圆的一部分？ （0-100％）

Question

考虑到cx and cy的位置属性以及椭圆本身的width和height属性，我想绘制一个椭圆。

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

---

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

我在这里附上了一张图以说明整个事情：

我真的不知道该怎么做。我宁愿选择一种解决方案，在不改变画布大小的情况下就可以这样做-仅出于性能方面的考虑，我希望有人对如何解决我的问题有个好主意。

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>

Answer 2

您可以用一些三角函数绘制椭圆

let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 170;


let ellipse = function(cx, cy, ds, de, w, h, color) {
  for (var i = ds; i < de; i ++) {
    var angle = i * ((Math.PI * 2) / 360);
    var x = Math.cos(angle) * w;
    var y = Math.sin(angle) * h;

    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.arc(cx+ x, cy+y, 6, 0, 2 * Math.PI);
    ctx.fill();
  }
}

let draw = function(cx, cy, ds, de, w, h, color) {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  delta += 10
  if (delta > 350) delta = 40
  hw = canvas.width / 2
  hh = canvas.height / 2  
  ellipse(hw, hh, 0, 360, 150, 60, "red")
  ellipse(hw, hh, 0, delta, 150, 60, "blue")  
  ctx.font = "80px Arial";
  ctx.fillStyle = "green";
  ctx.fillText(Math.round(delta/3.6) + "%", hw-70, hh+30);
}

delta = 90
setInterval(draw, 100)

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

一旦您有了不错的功能，就可以对其进行动画处理