Javascript Canvas: path, arc, text

Javascript Canvas Pfad, Kurven, Kreisbögen

Winkel für HTML5 Canvas werden als Radiant, nicht in Grad angegeben. Radiant ist der Standard für das Winkelmaß in weiten Bereichen der Mathematik. Ein Bogenmaß in Radiant entspricht der Länge des Radius abgetragen auf dem Kreisbogen.

Canvas Arc: Kreise und Bögen

Bögen oder Arcs sind Teile eines Kreises. arc() hängt einen Kreisbogen mit einem Mittelpunkt bei (x,y) und einem Radius r an den aktuellen Pfad.

                            +-- true, wenn der Bogen 
                            |   gegen den Uhrzeiger gezeichnet wird
arc (x,  y,  r,  sA,  eA,  aC)
     |   |   |    |   | 
     |   |   |    |   +-- Endwinkel
     |   |   |    | 
     |   |   |    +-- Anfänglicher Winkel
     |   |   |
     +---+   +-- Radius
       |
       Ursprung des Bogens
arc (x, y, r, sA, eA, aC)
fügt dem aktuellen Pfad einen Bogen an Position (x,y) hinzu
arcTo (x1, y1, x2, y2, r)
fügt dem aktuellen Pfad an der Position der Feder einen Bogen mit mit Radius r hinzu
closePath()
schließt den aktuellen Zeichenpfad

Grad in Radiant umrechnen

let rad = (Math.PI / 180) * degrees;
360° = 2 π rad

1rad= 360° 2 π = 180° π 57,29577951°

= 2 π360 rad = π180rad 0,017453293 rad
Canvas Arc und Math PI
if (canvas && canvas.getContext) {
    let ctx = canvas.getContext("2d");
    if (ctx) {  
        ctx.fillStyle = "hsla(68,80%,60%,0.3)";
        ctx.strokeStyle = "hsla(30,80%,60%,0.9)";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc (150, 150, 100, (2)*Math.PI, (1/3)*Math.PI, false);
        ctx.stroke();
        ctx.lineTo(150, 150); ctx.stroke(); ctx.fill();
        ctx.closePath();ctx.stroke();

        ctx.beginPath();
        ctx.arc (450, 150, 100, (2)*Math.PI, (1/3)*Math.PI, true);
        …
    }
}

Kleine Tabelle Radiant zu Grad

Kleine Tabelle Radiant zu Grad
rad rad Grad (°)
0 rad 0 rad
π/6 0.5235987756 30°
π/4 0.7853981634 45°
π/3 1.0471975512 60°
π/2 1.5707963268 90°
2π/3 2.0943951024 120°
3π/4 2.3561944902 135°
5π/6 2.6179938780 150°
π 3.1415926536 180°
3π/2 4.7123889804 270°
6.2831853072 360°

Tortengrafik mit Canvas

array.reduce() extrahiert Werte aus einem Array ([0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){ return previousValue + currentValue; });).

let results = [
  {name: "Sehr zufrieden", count: 110, color: "hsl(150,60%,80%)"},
  {name: "Zufrieden", count: 300, color: "hsl(200,60%,80%)"},
  {name: "Neutral", count: 200, color: "hsl(250,60%,80%)"},
  {name: "Unzufrieden", count: 150, color: "hsl(300,60%,80%)"}
];

  let cx = document.querySelector(".arc").getContext("2d");
  let total = results.reduce(function(sum, choice) {
    return sum + choice.count;
  }, 0);

  let currentAngle = -0.5 * Math.PI;
  results.forEach(function(result) {
    let sliceAngle = (result.count / total) * 2 * Math.PI;
    cx.beginPath();
    cx.arc(100, 100, 100,
           currentAngle, currentAngle + sliceAngle);
    currentAngle += sliceAngle;
    cx.lineTo(100, 100);
    cx.fillStyle = result.color;
    cx.fill();
  });
1.0 Π 0 Π 1.5 Π 0.5 Π Anfangswinkel Endwinkel