☆ 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:
// Einen Pixelbereich abrufenvar 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,
Wird in Farbverläufen verwendet, um Farbverläufe an verschiedenen Stellen festzulegen. Das Farbargument
ist die Farbe, die Sie in der Kontur oder Füllung an
der Versatzposition anwenden möchten. Die Versatzposition ist ein Wert zwischen
0,0 und 1,0, der angibt, wie weit entlang der Verlaufslinie
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:
//Erzeuge einen transparenten Farbverlauf von 50 %
gradientName.addColorStop(0.2, 'rgba(0, 0, 0, 0.5)');
☆ 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:
context.StrokeStyle = context.createPattern (gravel,
'repeat');
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)
{
fontSize--;
context .font = FontSize "px Arial";
}
context.fillText("Hallo Welt!", 10, 10);
context.fillText("Schriftgröße ist "fontSize "px ", 10, 50);
☆ context.measureText("text")
Diese Methode
berechnet die Größe des vom Text eingenommenen Bereichs basierend auf den aktuellen Werten von Schriftart, textAlign und textBaseline. Der Textparameter ist der zum Zeichnen verwendete Textinhalt. Diese Methode
gibt ein TextMetrics-Objekt zurück. Derzeit verfügt das TextMetrics-Objekt nur über eine
width-Eigenschaft, und in Zukunft werden möglicherweise weitere Eigenschaften bereitgestellt.
☆ context.rect(x, y, w, h)
Zeichnen Sie ein Rechteck mit der Breite w und der Höhe h am Punkt (x, y). Der aktuelle Punkt wird ignoriert. Aber nachdem das Rechteck
gezeichnet wurde, wird (x, y) zum neuen aktuellen Punkt.
☆ context.arc(x, y, radius, startAngle, endAngle,
gegen den Uhrzeigersinn)
Zeichnen Sie einen Bogen. x, y sind die Koordinaten des Bogenmittelpunkts; radius ist der Radius des Bogens;
startAngle, endAngle sind der Anfangs- und Endwinkel im Bogenmaß,
Pi wird durch Math.PI dargestellt, und der Wert ist 0. Der Bogen ist horizontal nach rechts; gegen den Uhrzeigersinn
gibt die Richtung an, in der der Bogen gezeichnet wird. Dies ist ein optionaler Parameter. Der boolesche Wert true ist gegen den Uhrzeigersinn, false
ist im Uhrzeigersinn und der Standardwert ist false . Bei Verwendung dieser Methode kann die lineTo-Methode weggelassen werden. Nachdem Sie mit der Methode
einen Bogen gezeichnet haben, beginnt die anschließende Pfadzeichnung am Endpunkt des Bogens
.
☆ context.arcTo(x1, y1, x2, y2, radius)
Der aktuelle Punkt und (x1, y1) bilden eine Linie L1, (x1, y1) und (x2, y2) bilden eine weitere
Linie L2, und der aktuelle Punkt und (x2, y2) bilden eine dritte Linie L3. Wenn (x1, y1) als Ursprung genommen wird,
L1 und L2 die Koordinatenachsen sind, ist der Radius der Radius, der L1 und L2 tangiert und auf dem Kreis O1 im selben Quadranten wie das „Liniensegment“ liegt " L3, sei der Tangentenpunkt mit L1 p1 und der Tangentenpunkt mit L2 p2. Es gibt zwei Bögen zwischen p1
und p2 auf Kreis O1. Der Bogen, der näher am Ursprung (x1, y1) liegt (auch der kürzere
Bogen auf dem Kreis), ist der gezeichnete Bogen.
Zusätzlich wird ein Liniensegment gezeichnet, um den Bogen zwischen dem aktuellen Punkt und (x1, y1) zu verbinden.
Da die Pfadzeichnung kontinuierlich ist, wird das Liniensegment zwischen dem aktuellen Punkt und (x1, y1) wird zuerst gezeichnet Zeichnen, dann
und dann den Bogen zeichnen. Der Tangentenpunkt p2 wird zum nächsten aktuellen Punkt.
Diese Methode wird häufig zum Zeichnen abgerundeter Rechtecke verwendet.
☆ context.quadraticCurveTo(x1, y1, x2, y2)
Zeichnen Sie ein quadratisches Bezier-Kurvensegment zwischen den aktuellen Koordinaten und (x2, y2), und die Krümmung wird durch
(x1, y1) gesteuert. (x1, y1) liegt nicht auf dem Kurvensegment.
Zu den weiteren Optionen für Kurven in der HTML5-Canvas-API gehören
die Funktionen bezierCurveTo, arcTo und arc. Diese Kurven
verwenden zusätzliche Kontrollpunkte, einen Radius oder Winkel, um
die Eigenschaften der Kurve zu bestimmen .
☆ context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Zeichnen Sie eine kubische Bezier-Kurve mit Kontrollpunkten (cp1x, cp1y) und (cp2x, cp2y)
zwischen dem aktuellen Punkt und (x, y), um die Krümmung zu steuern.
☆ context.clip()
Diese Methode erstellt einen Ausschnittsbereich
(Clip-Bereich) basierend auf dem zuletzt gezeichneten geschlossenen Pfad. Der Ausschnittsbereich entspricht einer Maske. Nur der Teil des künftig gezeichneten Inhalts
, der in den Ausschnittsbereich fällt, wird angezeigt.
☆ context.isPointInPath(x, y)
Überprüfen Sie, ob die Koordinaten (x, y) innerhalb des gezeichneten Pfades liegen. Der Rückgabewert ist wahr oder
falsch.
☆ canvas.toDataURL(type, args)
Diese Methode kann eine Leinwand in ein Bild konvertieren, und das Bild basiert auf der Base64-Kodierung. Wenn
keine zwei Parameter angibt, wird diese Methode ohne Parameter aufgerufen und das konvertierte Bildformat ist das PNG-Format
.
•Typ: Geben Sie das zu konvertierende Bildformat an, z. B. Bild/PNG, Bild/JPEG usw.
•args: Optionale Parameter. Wenn der Typ beispielsweise image/jpeg ist, können args ein Wert zwischen
0,0 und 0,1 sein, um die Qualität des Bildes anzugeben.
Der folgende Code öffnet beispielsweise den gezeichneten Inhalt im Canvas in einem neuen Browserfenster
oder Tab:
var canvas = document.getElementById("myCanvas");
window.open(canvas.toDataURL("image/png "));
