Dokumentation (canvas.quaese.de)
Linienstile - lineCap
Das Attribut lineCap bestimmt, wie ein Browser die Linienenden darstellen soll. Dazu stehen
drei Werte zur Verfügung.
lineCap
lineCap = type
type - case-sensitiver String: butt (default), round, square
butt
(default)
Linien werden an den Enden rechtwinklig abgeschlossen
round
Linien werden an den Enden mit einem Halbkreis abgeschlossen. Der Radius entspricht der halben Linienstärke.
square
Linien werden an den Enden mit einem Rechteck abgeschlossen, die Höhe entspricht der halben Linienstärke, die Breite der vollen Linienstärke.
Schematische Darstellung
Die nachfolgende Abbildung zeigt, wie eine Linie (grau) mit den unterschiedlichen Endtypen aussieht.
Beispiel
function drawIt(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext('2d');
objContext.lineWidth = 20;
objContext.moveTo(30, 30);
objContext.lineTo(30, 120);
objContext.lineCap = "butt";
objContext.stroke();
objContext.beginPath();
objContext.moveTo(70, 30);
objContext.lineTo(70, 120);
objContext.lineCap = "square";
objContext.stroke();
objContext.beginPath();
objContext.moveTo(110, 30);
objContext.lineTo(110, 120);
objContext.lineCap = "round";
objContext.stroke();
}else{
// Sonstiger Code
}
}
Erläuterung
Im Beispiel werden drei Linien mit den gleichen Ausgangsbedingungen gezeichnet:
- Länge 90 Einheiten
- Breite 20 Einheiten
Die Enden der Linien sind jedoch unterschiedlich - von links nach rechts: butt, square,
round.