Es kann nicht direkt in Konvas gezeichnet werden und muss mit dieser Methode erhalten werden.
Nächste.
☆ context.beginPath ()Zeigt den Beginn einer neuen Pfadzeichnung an.
☆ context.ispointinPath (x, y)Bestimmen Sie, ob sich ein Punkt auf dem Weg befindet. Diese Methode gilt nicht, nachdem das Koordinatensystem konvertiert wurde.
☆ context.moveto (x, y)Es entspricht dem Heben der Bürste von der Zeichenbrett, dem Verlassen der Zeichenbrett und der Positionierung der Spitze an der
Starten Sie bei den (x, y) Koordinaten eine neue Zeichnung an dieser neuen Position.
☆ context.lineto (x, y)Es entspricht der Bürstenspitze, die die Zeichenbrett nicht verlässt, und die Bürstenspitze bewegt sich von der aktuellen Koordinatenposition zu
Zeichnen Sie ein Liniensegment an den Koordinaten (x, y).
☆ context.stroke ()Nach dem Zeichnen auf Convas müssen einige Zeichenvorgänge diese Methode aufrufen, damit die Zeichnung darin besteht
Inhaltsanzeige.
☆ context.save ()Diese Methode rettet den aktuellen Zustand der Konvas, unabhängig von Änderungen der Konvas in der Zukunft.
Speichern Sie einfach den Status des CONFUS, bevor Sie diese Änderungen vornehmen, und Sie können ihn später anrufen
Die Methode von Context.Restore () stellt den gespeicherten Zustand wieder her. Normalerweise in einem neuen Abschnitt gezeichnet
oder der ursprüngliche Zustand der Konvas sollte vor dem Ändern der Operation gespeichert werden (es wird keine Zeichnung oder Änderung vorgenommen
), stellen Sie es in seinem ursprünglichen Zustand wieder her, nachdem ein neuer Zugang oder eine Änderung des Betriebs abgeschlossen ist. Das
Es ist auch für zukünftige Zeichenvorgänge förderlich.
Tatsächlich hat der 2D -Zeichnungsumgebungskontext von Canvas viele Eigenschaften und einige Methoden mit
Statusbezogene staatliche Wert, der Wert jedes Attributs wird geändert (oder eine Methode wird verwendet, um den Zeichnungszustand zu ändern).
Der Zeichnungszustand ändert sich. Wenn sie nach jeder Änderung gespeichert werden, werden mehrere Zustände einer Eigenschaft gespeichert
Speichern Sie es in Form eines Stapels, und die restore () Party kann in der Reihenfolge des Stapels mehrfach aufgerufen werden.
Kehren Sie in den entsprechenden gespeicherten Zustand zurück.
☆ context.translate (x, y)Diese Methode verschiebt den aktuellen Koordinatenursprung auf (x, y).
☆ context.restore ()Stellen Sie den Staat Convas in den zuletzt geretteten Staat wieder her.
☆ context.clesepath ()Dieser Befehl ist im Verhalten dem Lineto sehr ähnlich
Funktion, mit dem Unterschied, dass das Ziel ist
automatisch angenommen als die
Entstehung des Weges. Der Gnerpath informiert jedoch auch
Die Leinwand, die die Stromform geschlossen oder a gebildet hat
vollständiger Bereich. Dies wird für die Zukunft nützlich sein
füllt und schlägt.
Zu diesem Zeitpunkt können Sie mit mehr weitermachen
Segmente in Ihrem Weg, um zusätzliche Unterfassen zu erstellen. Oder du
kann jederzeit beginnen, um den Weg von vorne zu beginnen und zu löschen
Ganze auflisten.
☆ context.fill ();Füllen Sie den geschlossenen Pfad, nachdem Sie den Füllstil eingestellt haben. Sie müssen diese Methode nach dem Aufrufen nicht nennen
context.stroke () Methode.
☆ context.fillRect (x, y, width, Höhe)Zeichnen und füllen Sie den rechteckigen Bereich mit Breite und Länge (Breite, Höhe) bei (x, y). Anpassen
Nachdem Sie diese Methode verwendet haben, müssen Sie die Methode von Context.Stroke () nicht erneut aufrufen.
☆ context.strokerect (X, Y, Breite, Höhe)Zeichnen Sie einen rechteckigen Umriss mit Breite und Länge (Breite, Höhe) bei (x, y).
☆ context.clearRect (x, y, breite, Höhe)Reinigungsposition (die obere linke Ecke des Rechtecks) ist bei (x, y,) und die Größe ist (Breite, Höhe)
rechteckiger Bereich.
Entfernen Sie alle Inhalte aus dem rechteckigen Bereich und setzen Sie ihn zurück
zu seiner ursprünglichen, transparenten Farbe.
Die Fähigkeit, Rechtecke in der Leinwand zu löschen
Erstellen von Animationen und Spielen mit der HTML5 -Canvas -API. Von
Wiederholtes Zeichnen und Löschen von Abschnitten der Leinwand, es
ist möglich, die Illusion der Animation und viele darzustellen
Beispiele dafür sind bereits im Web vorhanden. Allerdings an
Erstellen Sie Animationen, die reibungslos ausgeführt werden. Sie müssen dies benötigen
Verwenden Sie die Schnittfunktionen und möglicherweise sogar eine Sekundarstufe
gepufferte Leinwand, um das Flackern zu minimieren, das durch verursacht wird durch
Häufig löscht Leinwand.
☆ context.drawimage ()Diese Methode verfügt über drei Überladungen, um das Bild auf Leinwand zu zeichnen. Die Bildquelle kann sein
Ein Bild des IMG -Tags auf der Seite, das Bildobjekt in JS und Video.
• context.drawimage (IMG, x, y)
Zeichnen Sie das Bild mit Bild img bei (x, y). Wenn die Größe der Leinwand größer ist als das Bild
das gesamte Bild wird gezeichnet; Wenn das Bild größer als Leinwand ist, wird der Überschuss beschnitten.
• Kontext.Drawimage (IMG, X, Y, W, H)
Verwenden Sie bei (x, y) Bild -IMG, um einen rechteckigen Bereich mit Länge und Breite (W, H) zu zeichnen. Bild
Die Größe des Sequentials ändert sich zu (W, H).
• context.drawimage (IMG, IMGX, IMGY, IMGW, IMGH, CX, CY,
CW, Ch)
Nehmen Sie ein IMG -Bild als Zeichenobjekt, und die Position auf dem IMG ist (IMGX, IMGY
) Die Fläche mit Größe (IMGW, IMGH) wird in der Leinwandposition (CX, Cy) gezeichnet
Zeichnen Sie den Bereich der Größe (CW, CH).
Eine Ausnahme wird ausgelöst, wenn der Erntebereich auf dem Bild außerhalb des Bildbereichs liegt.
• context.drawimage (Video, VX, VW, VW, VH, CX, Cy, CW, Ch)
Nehmen Sie ein Videoobjekt als Zeichenobjekt und greifen Sie die Position auf dem Video als (vx, vy)
) Ein Rahmen mit Größe (VW, VH) zeichnet groß an der Position auf Leinwand (CX, CY) groß
Bereiche mit klein (CW, CH).
Darüber hinaus kann der erste Parameter von Drawimage () auch eine weitere Leinwand sein.
☆ context.getImagedata (x, y, breite, Höhe)Diese Methode erhält die Größe (Breite, Höhe) von der Position innerhalb der Leinwand (x, y) aus
Ein Pixelbereich, der Rückgabewert ist ein Imagedata -Objekt. Imagedata hat Breite,
Höhe und Daten.
Das Datenattribut ist ein Array von Pixeln, und jede vier aufeinanderfolgende Elemente im Array stellen ein Bild dar
, vier aufeinanderfolgende Elemente enthalten nacheinander RGBA -Farb- und Transparenzinformationen. Vier aufeinanderfolgende Elemente
Das Pixel muss zu einem Pixel gehören, und die Position des ersten Elements wird nach Belieben nicht eingenommen.
Das Pixel -Array ist in der Leinwandbestellung von oben nach unten und von links nach rechts angegeben.
Scannen, um zu bekommen. Die Anzahl der Elemente im Pixelarray ist Breite * Höhe * 4. Um eine bestimmte zu erhalten
Pixelinformationen des Standorts.
Wenn Sie die Webseite mit dieser Methode in einem lokalen Dateimodus öffnen, ist sie nicht normal
Arbeiten, Sicherheitsfehler treten normalerweise auf. Sie können Dateien hochladen
Der Webserver fordert dann Zugriff auf, um dieses Problem zu beheben. Und die beteiligten Bilder, JS und
Die HTML muss aus demselben Domänennamen stammen. IE9 kann jedoch über lokale Dateien zugegriffen werden.
Ein Beispiel ist wie folgt:
Kopieren Sie den Code