Dokumentation (canvas.quaese.de)
 

Pfad-Schnittstelle - lineTo()

Die Methode lineTo verbindet den letzten Punkt im aktuellen Unterpfad (x0, y0) mit dem übergebenen Punkt (x, y) durch eine gerade Linie.

Besitzt der aktuelle Arbeitspfad keine Unterpfade, so muss die Methode nichts tun.

lineTo

void lineTo(x, y)

Die Methode erwartet zwei Parameter.

Parameter

x - Horizontale Koordinate des Zielpunkts

y - Vertikale Koordinate des Zielpunkts

Schematische Darstellung

Die Abbildung zeigt die Arbeitsweise von lineTo.

lineTo()

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