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