Mit der Methode stroke
müssen alle Verbindungen der Unterpfade des aktuellen Arbeitspfads
als Linien gezeichnet werden. Als Formatvorlage dient die Methode
strokeStyle.
void stroke()
Die Methode erwartet keine Parameter.
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(); }
Das Beispiel demonstriert, wie ein Haus mit acht Linien gezeichnet werden kann, ohne den Stift abzusetzen. Dazu ist folgende Reihenfolge einzuhalten: