Javascript Canvas: path, arc, text

Javascript Canvas Pfad, Kurven, Kreisbögen

Eine Methode circle wie in SVG hat Canvas nicht, dafür einen Kreisbogen: arc. Nicht so bequem in 360° eingeteilt, sondern in gewöhnungsbedürftige Radiant.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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;
360° = 2 π rad

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

= 2 π360 rad = π180rad 0,017453293 rad
Kreisbogen für Javascript Canvas und Math PI
Kreisbogen für Javascript Canvas 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();
  });