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:

  1. gelb
  2. orange
  3. rot
  4. lila
  5. blau
  6. helles grün
  7. dunkles grün
  8. schwarz

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