Dokumentation (canvas.quaese.de)
Pfad-Schnittstelle - stroke()
Mit der Methode stroke müssen alle Verbindungen der Unterpfade des aktuellen Arbeitspfads
als Linien gezeichnet werden. Als Formatvorlage dient die Methode
strokeStyle.
stroke
void stroke()
Die Methode erwartet keine Parameter.
Beispiel
function drawIt(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext('2d');
drawLine(objContext, 20, 100, 70, 100, "#ff0");
drawLine(objContext, 70, 100, 20, 50, "#FF9F00");
drawLine(objContext, 20, 50, 70, 50, "#f00");
drawLine(objContext, 70, 50, 45, 25, "#f0f");
drawLine(objContext, 45, 25, 20, 50, "#00f");
drawLine(objContext, 20, 50, 20, 100, "#0f0");
drawLine(objContext, 20, 100, 70, 50, "#009F00");
drawLine(objContext, 70, 50, 70, 100, "#7F7F7F");
}else{
// Sonstiger Code
}
}
function drawLine(objContext, intMoveX, intMoveY, intDestX, intDestY, strColor){
// Neuen Arbeitspfad anlegen
objContext.beginPath();
objContext.moveTo(intMoveX, intMoveY);
objContext.lineTo(intDestX, intDestY);
objContext.strokeStyle = strColor;
objContext.stroke();
}
Erläuterung
Das Beispiel demonstriert, wie ein Haus mit acht Linien gezeichnet werden kann, ohne den Stift abzusetzen. Dazu ist folgende Reihenfolge einzuhalten:
- gelb
- orange
- rot
- lila
- blau
- helles grün
- dunkles grün
- schwarz