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:

gelb
orange
rot
lila
blau
helles grün
dunkles grün
schwarz