Как нарисовать часть эллипса?(0-100%)

Question

Я хотел бы нарисовать эллипс с учетом cx and cy position-property и свойства 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

Вы можете нарисовать эллипс с небольшим количеством тригонометрии

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>

Если у вас есть хорошая функция, вы можете анимировать ее

Answer 2

Вы можете использовать встроенную функцию 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>