Dokumentation (canvas.quaese.de)
 

Linienstile - lineJoin

Die Eigenschaft lineJoin beschreibt mit welcher Eckenform Linien verbunden werden. Dafür stehen die Werte miter (default), bevel und round zur Verfügung.

lineJoin

lineJoin = type

type - case-sensitiver String: miter (default), bevel, round

miter

(default)
Linien werden so verbunden, dass die äusseren Ecken in einem einzelnen Punkt enden (Gehrung). Um den Abstand der äusseren Ecke bei zu spitzen Winkeln nicht zu gross werden zu lassen, steht das Attribut miterLimit zur Verfügung.

bevel

Die Ecken werden abgeschrägt (Fase).

round

Rundet alle äusseren Ecken einer Form ab. Der Radius entspricht der Linienstärke.

Schematische Darstellung

Die folgende Abbildung zeigt die unterschiedlichen Eckenvarianten.

lineJoin

Beispiel

function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

    var intRepeat = 3;
    // Array mit erlaubten Verbindungstypen
    var arrJoin = new Array("miter", "bevel", "round");
    // Array mit Farben
    var arrColor = new Array("#000", "#111", "#000");

    // Linienstärke
    objContext.lineWidth = 20;

    // Alle Verbindungstypen durchlaufen
    for(var i=0; i<arrJoin.length; i++){
      // Neuen Pfad anlegen
      objContext.beginPath();

      // Anzahl Wiederholungen (intRepeat)
      for(var j=0; j<intRepeat; j++){
        objContext.moveTo(20 + i*100, 20 + j*40);
        objContext.lineTo(60 + i*100, 60 + j*40);
        objContext.lineTo(100 + i*100, 20 + j*40);
      }

      // Verbindungstyp festlegen
      objContext.lineJoin = arrJoin[i];
      // Linienfarbe festlegen
      objContext.strokeStyle = arrColor[i];
      // Linien zeichnen
      objContext.stroke();
    }
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Es werden drei Liniengruppen mit den unterschiedlichen Eckenvarianten. Die erste Gruppe wurde mit miter ausgezeichnet, die zweite mit bevel, die dritte zuletzt mit round.

Anzeige

Ihr Browser unterstützt das canvas-Element leider nicht.

 
Dokument zuletzt modifiziert: 05.02.2008, 14:28 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap