Javascript Canvas: path, arc, text

Canvas Arc: Kreise und Bögen

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.

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 oder zeichnet ganz einfach Kreise und Kreisbögen.

    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.
x / y ist das Zentrum des Kreises.
r ist der Radius,

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

ctx.beginPath();
ctx.arc(100, 120, 90, 0, 2 * Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.arc(300, 120, 90, 0, 1 * Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.arc(500, 120, 90, 0, 1 * Math.PI, true);
ctx.stroke();

Grad in Radiant umrechnen

let rad = (Math.PI / 180) * degrees;

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

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();
  });