CSS, HTML und Javascript mit {stil}

Javascript Canvas: path, arc, text

Canvas Pfade und Kurven mit Javascript

Ein Pfad im HTML Canvas entsteht durch die Verbindungen von Punkt zu Punkt, die mit lineTo(), arcTo(), quadraticCurveTo() und bezierCurveTo() konstruiert werden.

Ein Pfad im Canvas beginnt mit beginPath() gefolgt von moveTo(x,y), um den Ausgangspunkt des Pfads zu setzen. lineTo(x,y) gibt die Koordinaten der folgenden Punkte und erzeugt jeweils eine Linie vom Ausgangspunkt zum neuen Endpunkt. Am Ende zeichnet stroke() die Kontur des Pfades.

Jeder Canvas kann immer nur einen aktiven Pfad haben.

Canvas Linien: Path

ctx.beginPath();
ctx.moveTo(20, 180); // Feder zum Startpunkt
ctx.lineTo(40, 20); ctx.lineTo(140, 60); ctx.lineTo(180, 180);
ctx.stroke();

closePath() schließt den Pfad (2. Pfad, closePath wird vor stroke() aufgerufen) und erzeugt dabei eine Linie vom Ausgangspunkt zum initialen Startpunkt des Pfades.

ctx.beginPath();
ctx.moveTo(220, 180); // Feder zum Startpunkt
ctx.lineTo(240, 20); ctx.lineTo(340, 60); ctx.lineTo(380, 180);
ctx.closePath();
ctx.stroke();

Der Pfad im Canvas muss nicht geschlossen werden, um den Pfad zu füllen. Aber fill() wird vor stroke() aufgerufen.

ctx.beginPath();
ctx.moveTo(420, 180); // Feder zum Startpunkt
ctx.lineTo(440, 20); ctx.lineTo(540, 60); ctx.lineTo(580, 180);
ctx.fill();
ctx.stroke();

Der Stroke – die Umrandung von Flächen oder Linien – auf den Canvas ist immer eine solide Linie. Gepunktete oder gestrichtelte Linien (dashed oder dotted) sind für den Javascript Canvas nicht vorgesehen.

Bézierkurven und quadratische Kurven

Wer mit Illustrator, Photoshop, SVG oder Inkscape Freisteller oder Grafiken erstellt, kennt Bezierkurven (die Feder in Photoshop). Pfade bestehen aus Linien, die an Knotenpunkte eine Biegung definieren und dabei von Knoten zu Knoten miteinander verbunden sind.

Mit stroke() zeichnet Javascript die Kontur des Pfades; fill() füllt den Pfad im Canvas.

  • Bézierkurven haben zwei Kontrollpunkte, um die Kurve festzulegen.
  • Quadratische Kurven haben einen Startpunkt und einen Kontrollpunkt am Endpunkt.
bezierCurveTo(cx1, cy1, cx2, cy2, end1, end2)
Zeichent eine Bézierlinie vom Ausgangspunkt der Feder mit zwei Kontrollpunkten an (cx1,cy1) und (cx2,cy2) am Endpunkt (end1,end2)
quadraticCurveTo(cx, cy, x, y)
Zeichnet eine quadratische Kurve am Ausgangpunkt mit einem Kontrollpunkt (cx,cy) am Endpunkt (x,y)
ctx.beginPath();
ctx.moveTo(50,120);
ctx.bezierCurveTo(50,20,200,20,200,70);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(220,120);
ctx.quadraticCurveTo(220,20,380,70);

Die hellgrauen Linien zeigen die Kontrollpunkte an.

Canvas Arc: Kreise und Bögen

Bögen oder Arcs sind Teile eines Kreises:

                            +-- 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

Tortengrafik mit Canvas

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

var 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%)"}
];

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

  var currentAngle = -0.5 * Math.PI;
  results.forEach(function(result) {
    var 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();
  });

Winkel für HTML5 Canvas werden als Radiant, nicht in Grad angegeben. Grad in Radiant umrechnen

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

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

= 2 π360 rad = π180rad 0,017453293 rad
rad-zu-grad

Winkelangaben im Javascript canvas: Der erste Kreisbogen ist im Uhrzeigersinn (false), der zweite Kreisborgen gegen den Uhrzeigersinn (true).

if (canvas && canvas.getContext) {
    var 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);
        …
    }
}

Canvas: Text zeichnen

Ein Text, der mit Javascript in ein HTML5 Canvas gezeichnet wird, kann nicht durch CSS aufbereitet werden und ist für Screenreader und Suchmaschinen nicht lesbar. Text wird zu Pixeln wie jede andere Form.

Text-Aktionen
Beschreibung
font
Schrift festlegen – und zwar genauso wie mit CSS. Default Schriftgröße ist 10px
textAlign
start (default), end, left, right, center
textBaseline
top, hanging, middle, alphabetic, ideographic, bottom
fillText(txt, x, y, [maxW])
Text als String rendern, wobei x, y nicht breiter als maxW werden dürfen
strokeText(txt, x, y, [maxW])
Text als String rendern, wobei x, y nicht breiter als maxW werden dürfen
measureText(text)
Gibt die Metrik der aktuellen Schrifteinstellung zurück
// Text mit Kontur
var myString = "Text in einem Canvas ist nicht barrierefrei";
ctx.fillText(myString, 20,20);
ctx.font = "20px Verdana"
ctx.fillStyle = "#FFDFE0";
ctx.strokeStyle = "#CF9C9E";
ctx.fillText(theString, 20,160);						
ctx.strokeText(theString, 20,160);

Canvas Path mit SVG Path

Chrome, Safari und Firefox erzeugen mit dem Path2D-API Pfade auf der Basis von SVG-Pfaden. Das würde das Zeichnen von komplexen Pfaden im Canvas erleichtern, denn für SVG können wir Grafik-Programme wie Inkscape und Adobe Illustrator einsetzen. Aber Microsoft Edge unterstützt SVG Path-Daten im Constructor nicht.

var canvas = document.getElementById('svg-canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#ccc';
ctx.lineWidth = 1;
ctx.fillStyle = '#524357';

var p0 = new Path2D ("m98.82 26.62l-65.6 90.88 42.94-9.6z");
ctx.stroke(p0);
ctx.fill(p0);
ctx.fillStyle = '#342637';
CANVAS