• Allgemeines
• Schnittstellen/Objekte
• Canvas-Zustand
• Transformationen
• Rechtecke
• Pfad-Schnittstelle
  • arc()
  • arcTo()
  • beginPath()
  • bezierCurveTo()
  • clip()
  • closePath()
  • fill()
  • isPointInPath()
  • lineTo()
  • moveTo()
  • quadraticCurveTo()
  • rect()
  • stroke()
• Farben und Styles
• Linienstile
• Schatten
• Verknüpfungen
• Bilder zeichnen
• Pixel-Manipulation
• Anwendungen
• Links
• Sitemap
• Impressum

Pfad-Schnittstelle - moveTo()

Die Methode moveTo muss einen neuen Unterpfad anlegen, mit den übergebenen Koodinaten (x, y) für einen neuen und einzigen Punkt - den Startpunkt. Der neue Punkt ist auch der aktive Punkt, von dem aus die nächste Pfadmanipulation ausgeht.

moveTo

void moveTo(x, y)

Die Methode erwartet zwei Parameter.

Parameter

x - Horizontale Koordinate des neuen Punktes

y - Vertikale Koordinate des neuen Punktes

Beispiel

function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

    for(var i=0; i<10; i++){
      // Füll-/Linienmethode (Rotabstufungen)
      objContext.fillStyle = "rgb("+(255 - i*20)+", 0, 0)";
      objContext.strokeStyle = "rgb("+(0 + i*20)+", 0, 0)";

      // Neuen Arbeitspfad anlegen
      objContext.beginPath();

      // Startpunkt setzen
      objContext.moveTo((i*10)+ 10, (i*10)+ 10);
      objContext.lineTo((i*10)+ 60, (i*10)+ 10);
      objContext.lineTo((i*10)+ 60, (i*10)+ 60);
      objContext.lineTo((i*10)+ 10, (i*10)+ 60);
      objContext.lineTo((i*10)+ 10, (i*10)+ 10);
      objContext.fill();

      // IE (sonst wird nur fill ausgeführt)
      if(document.all && !window.opera){
        // Neuen Arbeitspfad anlegen
        objContext.beginPath();

        // Startpunkt setzen
        objContext.moveTo((i*10)+ 10, (i*10)+ 10);
        objContext.lineTo((i*10)+ 60, (i*10)+ 10);
        objContext.lineTo((i*10)+ 60, (i*10)+ 60);
        objContext.lineTo((i*10)+ 10, (i*10)+ 60);
        objContext.lineTo((i*10)+ 10, (i*10)+ 10);
      }
      objContext.stroke();
    }
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Im Beispiel wird eine for-Schleife 10-mal durchlaufen. In jedem Schleifendurchlauf wird der Startpunkt um 10 Pixel weiter nach rechts sowie nach unten verschoben (moveTo). Ausgehend von dieser neuen Startposition wird in jedem Schritt ein Quadrat in Rotabstufungen gezeichnet.

Anzeige