Get best of the week

Canvas API Memo



Guten Tag, Freunde!

Dieser Artikel enthält eine kleine Auswahl von Beispielen für die Arbeit mit der Canvas-API, auf die bei Bedarf Bezug genommen werden kann, um das untersuchte Material abzurufen.

Dies ist keine Anleitung zum Arbeiten mit Canvas, sondern nur eine Demonstration seiner Fähigkeiten.

Für mich ist dies auch eine Art Zwischensumme beim Studium der Leinwand.

Der Code ist in separate Sandbox-Blöcke unterteilt, die zur besseren Lesbarkeit unter dem „Schnitt“ platziert werden.

Ein paar wichtige Punkte.

Die Breite und Höhe der Leinwand wird anhand der folgenden Attribute besser bestimmt:

<canvas width="300" height="300"></canvas>

Wenn der gesamte Anzeigebereich eine Leinwand sein soll, gehen wir wie folgt vor:

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

Normalerweise definiere ich die Leinwand und den zweidimensionalen Zeichnungskontext wie folgt:

const canvas = document.querySelector('canvas')
//     jQuery
const $ = canvas.getContext('2d')

Genug Worte.

Beginnen wir mit einfachen Formen.

Linie:



Rechteck (Quadrat):



Dreieck:



Ein Kreis:




Bezierkurven:




Quadratische Kurven:




Kubische Kurven:



Lass uns ein paar Experimente machen.

Linienfarbe:



Füllfarbe:



Transparenz (Alpha-Kanal):



Transparenz (RGBA):



Wir fahren fort.

Text:



Textmetriken (Schriftarten):



Gradient:



Bild:



Muster (Muster):



Wir implementieren mehrere Funktionen.

Polygon-Zeichenfunktion:



Schneeflocken-Zeichenfunktion:



Textumbruchfunktion:
: .



Die Funktion zum Abrufen der Koordinaten des Cursors:



Wir fahren fort.

Bestimmen Sie die Farbe des Bildes:
( ) : harryheman.imtqy.com/art.jpg.



Zeichnen Sie das Boot-Symbol:



Wir implementieren Cursor-Tracking:



Erstellen Sie einen interaktiven Text:



Siehe auch:


Vielen Dank für Ihre Zeit. Ich hoffe es wurde gut angelegt.

More articles:


All Articles