Comment dessiner une partie d'ellipse ? (0-100%)

Question

J'aimerais dessiner une ellipse à partir d'un cx and cy ainsi qu'une propriété de largeur et de hauteur de l'ellipse elle-même.

Vous trouverez ci-dessous un code de travail pour cette configuration :

---

Mais je souhaite maintenant générer une sorte d'"affichage de la progression" en peignant un pourcentage (de 0 à 100) de l'ellipse au lieu de l'ellipse complète.

J'ai joint un graphique pour illustrer le tout :

Je n'ai pas vraiment d'idée précise sur la manière de procéder. Je préférerais une solution qui me permette de ne pas redimensionner le canevas - juste pour des raisons de performance et j'espère que quelqu'un a une bonne idée pour résoudre mon problème.

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

Vous pouvez utiliser la fonction intégrée ctx.ellipse - Nous commençons par dessiner la ligne verte sous la forme d'une ellipse complète. Ensuite, nous dessinons l'ellipse partielle rouge par-dessus :

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

Vous pouvez dessiner l'ellipse avec un peu de trigonométrie

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>

Une fois que vous avez créé une belle fonction, vous pouvez l'animer.