Javascript Canvas: path, arc, text

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