Detaillierte Erläuterung der HTML5-Convas-APIs-Methoden_HTML5-Tutorialfähigkeiten

☆ canvas.getContext('2d')

Sie können nicht direkt auf der Leinwand zeichnen, Sie müssen diese Methode verwenden, um
die Grundlage für die zweidimensionale Raumzeichnung zu erhalten.

☆ context.beginPath()

zeigt den Beginn einer neuen Pfadzeichnung an.

☆ context.isPointInPath(x, y)

Bestimmen Sie, ob sich ein bestimmter Punkt auf dem Pfad befindet. Diese Methode funktioniert nicht, nachdem das Koordinatensystem transformiert wurde.

☆ context.moveTo(x,y)

entspricht dem Anheben des Pinsels vom Zeichenbrett, dem Entfernen der Stiftspitze vom Zeichenbrett, dem anschließenden Positionieren der Stiftspitze an den
(x, y)-Koordinaten und dem Beginnen einer neuen Zeichnung an dieser neuen Position .

☆ context.lineTo(x, y)

entspricht der Tatsache, dass die Pinselspitze das Zeichenbrett nicht verlässt. Die Pinselspitze bewegt sich von der aktuellen Koordinatenposition zur
(x, y)-Koordinate, um ein Liniensegment zu zeichnen.

☆ context.Stroke()

Nach dem Zeichnen auf der Leinwand müssen einige Zeichenvorgänge diese Methode aufrufen, damit der gezeichnete Inhalt
angezeigt werden kann.

☆ context.save()

Diese Methode speichert den aktuellen Status der Convas, unabhängig von zukünftigen Änderungen an den Convas.
Solange Sie den Convas-Status speichern, bevor Sie diese Änderungen vornehmen, können Sie
context.restore aufrufen ()-Methode, um den gespeicherten Zustand später wiederherzustellen. Normalerweise sollte der ursprüngliche Zustand der Leinwand (ohne Zeichnung oder Änderungen
) vor einer neuen Zeichnung
oder einem Änderungsvorgang gespeichert und nach jedem Ende eines neuen Zeichnungs- oder Änderungsvorgangs wieder in den Originalzustand zurückversetzt werden. Dieses
wird für zukünftige Zeichenvorgänge hilfreich sein.
Tatsächlich hängen viele Eigenschaften und einige Methoden des 2D-Zeichnungsumgebungskontexts mit dem Status
zusammen. Wenn der Wert jeder Eigenschaft geändert wird (oder einige Methoden zum Ändern des Zeichnungsstatus verwendet werden), wird der
Zeichnungsstatus ist Änderung. Beim Speichern nach jeder Änderung werden mehrere Status eines Attributs in Form eines Stapels gespeichert. Sie können die Methode „restore()“ mehrmals in der Reihenfolge des Stapels aufrufen, um zum entsprechenden gespeicherten Status zurückzukehren.

☆ context.translate(x, y)

Diese Methode verschiebt den aktuellen Koordinatenursprung nach (x, y).

☆ context.restore()

Stellen Sie den Canvas-Status auf den zuletzt gespeicherten Status wieder her.

☆ context.closePath()

Dieser Befehl verhält sich sehr ähnlich wie die Funktion lineTo

, mit dem Unterschied, dass

automatisch davon ausgegangen wird, dass das Ziel der
Ursprung des Pfads ist. Der closePath informiert jedoch auch
die Leinwand, die die aktuelle Form geschlossen hat oder einen
vollständig geschlossenen Bereich gebildet hat. Dies wird für zukünftige
Füllungen und Striche nützlich sein.
An diesem Punkt können Sie mit weiteren
Segmenten fortfahren in Ihrem Pfad, um zusätzliche Unterpfade zu erstellen. Sie können
den Pfad auch jederzeit von vorne beginnen und die
Liste vollständig löschen.

☆ context.fill();

Füllen Sie den geschlossenen Pfad, nachdem Sie den Füllstil festgelegt haben. Nach dem Aufruf dieser Methode ist es nicht erforderlich, die Methode

context.Stroke() aufzurufen.

☆ context.fillRect(x, y, width, height)

Zeichnen und füllen Sie einen rechteckigen Bereich mit Breite und Länge (Breite, Höhe) bei (x, y). Es ist nicht erforderlich, die Methode context.Stroke() aufzurufen, nachdem

diese Methode aufgerufen wurde.

☆ context.StrokeRect(x, y, width, height)

Zeichnen Sie einen rechteckigen Umriss mit Breite und Länge (Breite, Höhe) bei (x, y).

☆ context.clearRect(x, y, width, height)

Reinigen Sie den rechteckigen Bereich, dessen Position (obere linke Ecke des Rechtecks) (x, y) und dessen Größe (Breite, Höhe) ist

.

Entfernen Sie jeglichen Inhalt aus dem rechteckigen Bereich und setzen Sie ihn
auf seine ursprüngliche, transparente Farbe zurück.
Die Möglichkeit, Rechtecke in der Leinwand zu löschen, ist von zentraler Bedeutung für die
Erstellung von Animationen und Spielen mithilfe der HTML5-Canvas-API. Durch
das wiederholte Zeichnen und Löschen von Abschnitten der Leinwand ist es
möglich, die Illusion einer Animation darzustellen, und viele
Beispiele dafür gibt es bereits im Web. Allerdings
Animationen zu erstellen, die funktionieren Um einen reibungslosen Ablauf zu gewährleisten, müssen Sie
Beschneidungsfunktionen und möglicherweise sogar eine sekundäre
gepufferte Leinwand verwenden, um das Flackern zu minimieren, das durch
häufiges Löschen der Leinwand verursacht wird.

☆ context.drawImage( )

Diese Methode verfügt über drei Überladungen, mit denen Bilder auf Leinwand gezeichnet werden können. Die Bildquelle kann das img-Tag auf der
-Seite, das Bildobjekt in JS und ein Frame des Videos sein.
•context.drawImage(img, x, y)
Zeichnet ein Bild mit Bild img bei (x, y). Wenn die Leinwandgröße größer als das Bild ist
, wird das gesamte Bild gezeichnet. Wenn das Bild größer als die Leinwand ist, wird der überschüssige Teil abgeschnitten.
•context.drawImage(img, x, y, w, h)
Zeichnen Sie einen rechteckigen Bereich mit der Länge und Breite (w, h) unter Verwendung des Bildes img bei (x, y). Die Größe des Bildes
wird in (B, H) geändert.
•context.drawImage(img, imgx, imgy, imgw, imgh, cx, cy,
cw, ch)
Verwenden Sie ein IMG-Bild als Zeichenobjekt und beschneiden Sie die obere Position von img auf ( imgx, imgy
) Ein Bereich der Größe (imgw, imgh) wird an der Position (cx, cy)
in der Leinwand gezeichnet und ein Bereich der Größe (cw, ch) wird gezeichnet.
Wenn der zugeschnittene Bereich auf dem Bild den Bildbereich überschreitet, wird eine Ausnahme ausgelöst.
•context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch)
Verwenden Sie ein Videoobjekt als Zeichenobjekt und greifen Sie auf die obere Position des Videos (vx, vy) zu
) Einen Rahmen mit einer Größe von (vw, vh), zeichnen Sie einen Bereich mit einer Größe von (cw, ch) an der Position (cx, cy) auf der Leinwand.
Darüber hinaus kann der erste Parameter von drawImage() auch eine andere Leinwand sein.

☆ context.getImageData(x, y, width, height)

Diese Methode ermittelt die Größe (Breite, Höhe) aus der Position (x, y) im Canvas

Ein Pixelbereich und der Rückgabewert ist ein ImageData-Objekt. ImageData hat drei Attribute: Breite,
Höhe und Daten. Das
Datenattribut ist ein Pixelarray. Jedes vier aufeinanderfolgende Elemente im Array stellt ein Pixel dar. Die vier aufeinanderfolgenden Elemente enthalten wiederum RGBA-Farb- und Transparenzinformationen. Vier aufeinanderfolgende Elemente
müssen zu einem Pixel gehören und die Position des ersten Elements wird nicht willkürlich gewählt.
Das Pixelarray wird durch Scannen des angegebenen Bereichs
in der Leinwand in der Reihenfolge von oben nach unten und von links nach rechts erhalten. Die Anzahl der Elemente im Pixelarray beträgt Breite * Höhe * 4. Um Pixelinformationen für eine bestimmte
-Position abzurufen.
Wenn eine Webseite, die diese Methode verwendet, als lokale Datei mit einem Browser geöffnet wird, funktioniert sie nicht ordnungsgemäß
und normalerweise tritt ein Sicherheitsfehler auf. Dieses Problem kann gelöst werden, indem Sie die Datei auf den
-Webserver hochladen und dann Zugriff anfordern. Darüber hinaus müssen die beteiligten Bilder, JS und
HTML vom selben Domainnamen stammen. Auf IE9 kann jedoch über lokale Dateien zugegriffen werden.
Ein Beispiel lautet wie folgt:

Kopieren Sie den Code Der Code lautet wie folgt:

// Einen Pixelbereich abrufen

var imageData = context.getImageData(0, 0, 3, 3); // 3x3
grid

var width = imageData.width;
//Die Position des spezifischen Pixels im Pixelbereich
var x = 2;
var y = 2; ist im Pixel-Array Index des entsprechenden Elements
var pixelRedindex = ((y-1)*(width*4)) ((x-1)*4); >var pixelBlueindex = pixelRedindex 2 ;
var pixelAlphaindex = pixelRedindex

var pixel = imageData.data // CanvasPixelArray

var red = pixel[pixelRedindex];
var green = pixel[pixelGreenindex]; >


☆ context.createImageData(w, h)


Generieren Sie ein ImageData-Objekt der Größe (w, h). Die Bedeutung des ImageData-Objekts
ist dieselbe wie das von getImageData() erhaltene ImageData-Objekt.

☆ context.putImageData(ImageData, x, y, x1, y1, w, h)

Zeichnen Sie ein ImageData-Objekt bei (x, y) auf die Leinwand. Die letzten vier Parameter sind optionale Parameter, mit denen Sie die Position und Größe eines Zuschneiderechtecks ​​festlegen.

☆ context.createLinearGradient(x1, y1, x2, y2)

Erzeugen Sie einen linearen Gradienten zwischen (x1, y1) und (x2, y2). Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

var gradientName = context.createLinearGradient( -5, -50,

die Farbe sollte erreicht werden gradientName.addColorStop(1, '#552200');

Color kann die Funktion rgba(r,g,b,a) in CSS verwenden, um transparente Farbverläufe zu generieren, wie zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

☆ context.createRadialGradient(x0, y0, r0, x1, y1, r1)

Erstellen Sie einen radialen Verlaufsbereich zwischen zwei Kreisen. Die ersten drei Argumente
stellen einen Kreis mit dem Mittelpunkt (x0, y0) und dem Radius r0 dar, und
die letzten drei Argumente stellen einen zweiten Kreis mit dem Mittelpunkt
bei (x1, y1) und dem Radius r1 dar. Der Gradient ist über den
Bereich zwischen den beiden Kreisen gezogen.

☆ context.createPattern(img, 'repeatPattern')

Verwenden Sie ein Bildbild, um einen
StrokeStyle-Stil oder einen gefüllten FillStyle-Stil eines bestimmten Pfads mit dem Wiederholungstyp „repeatPattern“ zu generieren. Der Wert von „repeatPattern“ kann
einer von „repeat“, „repeat-x“, „repeat-y“ und „no-repeat“ sein. Zum Beispiel:

Der Parameter img kann auch eine andere Leinwand oder ein anderes Video sein

☆ context.scale(xMultiple, yMultiple)

Die beiden Parameter geben jeweils den nachfolgenden Zeichnungsskalierungsfaktor des Objekts in x- und y-Richtung an. Wenn er größer als 1 ist, bedeutet
Vergrößern und zwischen 0 und 1 bedeutet Verkleinern. Wenn es sich um einen negativen Wert handelt, können Effekte wie Spiegelung und Umdrehen erzielt werden
.

☆ context.rotate(angle)

wird verwendet, um den Zeichenumgebungskontext zu drehen, mit dem aktuellen Koordinatenursprung als Drehzentrum, im Bogenmaß
als Einheit und kombiniert mit Math.PI. Wenn der Parameterwinkel ein positiver Wert ist, dreht er sich im Uhrzeigersinn, und wenn er ein negativer Wert ist, dreht er sich gegen den Uhrzeigersinn.

☆ context.transform(ScaleX, skewY, skewX, ScaleY, transX, transY)

Diese Funktion wird verwendet, um die Größe, Scherung und Position des Zeichenobjekts zu steuern. Es handelt sich um eine Transformationsmatrix

. ScaleX und ScaleY sind die Skalierung der x- bzw. y-Koordinaten. skewY steuert die vertikale Scherung des
-Kontexts. Sein Wert kann ein positiver oder negativer Gleitkommawert oder eine Ganzzahl beliebiger Größe sein, was der Ausführung von y'= y skewY * x auf der Ordinate entspricht. Spieß Die letzten beiden Parameter entsprechen den beiden Parametern
in Translate(x, y).


☆ context.setTransform(ScaleX, skewY, skewX, ScaleY,
transX, transY)

Diese Methode ähnelt der Transformation, aber die Transformationsmethode wird mit den Effekten der Transformations-, Skalierungs- und Rotationsmethoden kombiniert, die zuvor
angewendet wurden, was zu einem komplexen zusammengesetzten Transformationseffekt führt. Die setTransform-Methode wendet die Transformation vom ursprünglichen Zustand des Kontexts an und wird nicht

mit der vorherigen Transformation verknüpft. Daher wird context.setTransform(1, 0, 0, 1,

0, 0) häufig verwendet, um den Transformationsstatus des Kontexts auf seinen ursprünglichen Wert wiederherzustellen.

☆ fillText (text, x, y, maxwidth)

Zeichnen Sie mit Text gefüllten Text an den (x, y)-Koordinaten. maxwidth ist ein optionaler Parameter

, der verwendet wird, um die Breite des gesamten Textes und die Summe der Textabstände

zu begrenzen

Einzelne Zeichen werden länger und die Abstände werden kleiner. Fülltext kann durch die Kombination von context.font,

context.fillStyle, context.textAlign und anderen Attributen gezeichnet werden.


☆ StrokeText (Text, x, y, maxwidth)

Zeichnen Sie Text mit Pfadinhaltstext an (x, y)-Koordinaten. maxwidt ist ein optionaler Parameter , der verwendet wird, um die Breite des gesamten Textes und die Summe der Textabstände zu begrenzen

Einzelne Zeichen werden länger und die Abstände werden kleiner. Pfadtext kann durch die Kombination von context.font,

context.textAlign, context.lineWidth, context.StrokeStyle und anderen
-Eigenschaften gezeichnet werden.
Zum Beispiel:





Code kopieren

while(context.measureText("Hello world!").width > 140)