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.

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.

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

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

dot 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