Mit

mit HTML5 k?nnen Sie Grafiken mithilfe des Elements und seiner zugeh?rigen JavaScript -API direkt in Ihre Webseite zeichnen.

In diesem Beitrag werde ich Ihnen JCANVAS vorstellen, einer kostenlosen und Open-Source-JQuery-basierten Bibliothek für die HTML5-Canvas-API.

Wenn Sie sich mit JQuery entwickeln, erleichtert JCanvas es einfacher und schneller, coole Canvas -Zeichnungen und interaktive Anwendungen mit JQuery Syntax zu codieren.

Key Takeaways

• jcanvas ist eine kostenlose Open-Source-Bibliothek, die JQuery in die HTML5-Canvas-API integriert und die Erstellung von Grafiken und interaktiven Anwendungen mit Jquery Syntax vereinfacht.
• Um JCANVAS zu verwenden, müssen sowohl das JCanvas -Skript als auch JQuery in Ihr Projekt aufgenommen werden, wodurch die Verwendung von JCANVAS -Methoden erm?glicht werden kann, die auf der Struktur von JQuery beruht.
• jcanvas verbessert die native Canvas-API mit zus?tzlichen Funktionen wie Schichten, Ereignissen, Drag & Drop und Animation, w?hrend sie die Kompatibilit?t mit nativen Canvas-Methoden beibehalten.
• Zeichnenformen, Text und Bilder auf der Leinwand werden durch JCANVAs mit Methoden wie DrawRect (), Drawarc () und Drawimage () optimiert, die verschiedene anpassbare Eigenschaften akzeptieren.
• jcanvas unterstützt erweiterte Funktionen wie Layer -Manipulation und -animation und erm?glicht komplexe grafische Kreationen und dynamische, interaktive Benutzererfahrungen auf Webseiten.

Was ist jcanvas?

Die JCANVAS -Website erkl?rt:

jcanvas ist eine JavaScript -Bibliothek, die mit JQuery und für JQuery geschrieben wurde und die sich um die HTML5 -Canvas -API handelt und neue Funktionen und Funktionen hinzufügt, von denen viele anpassbar sind. Zu den F?higkeiten geh?ren Ebenen, Ereignisse, Drag & Drop, Animation und vieles mehr.

Das Ergebnis ist eine flexible API, die in eine zuckerhaltige jQuery-artige Syntax eingewickelt ist, die die HTML5-Leinwand Leistung und Leichtigkeit bringt.

Mit

Jcanvas k?nnen Sie alles tun, was Sie mit der nativen Canvas -API und mehr tun k?nnen. Wenn Sie es vorziehen, k?nnen Sie auch native HTML5 -Canvas -API -Methoden mit JCanvas verwenden. Die DRAG () -Methode dient genau diesen Zweck. Darüber hinaus k?nnen Sie JCANVAs problemlos mit Ihren eigenen Methoden und Eigenschaften mit seiner Extend () -Funktion erweitern.

Hinzufügen von JCanvas zu Ihrem Projekt

Um JCANVAs in Ihr Projekt aufzunehmen, laden Sie das Skript von der offiziellen Website oder der GitHub -Seite herunter und geben Sie es in Ihren Projektordner ein. Wie bereits erw?hnt, braucht Jcanvas JQuery, um zu arbeiten. Gehen Sie also auch darauf ein.

Die Skriptdateien Ihres Projekts sehen ungef?hr so ??aus:

<scriptjs/jcanvas.min.js><span><span><span></script</span>></span>
</span><scriptmyCanvas" width<span>="600"</span> height<span>="300"</span>>
  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

Hier sind einige Punkte von Interesse am Code -Snippet oben.

• standardm??ig betragen die Abmessungen der -Zeichneroberfl?che 300px x 150px. Sie k?nnen diese Standardgr??e in den Attributen der Breite und der H?he im Markup des Elements ?ndern.
• Hinzufügen eines ID -Attributs ist nicht erforderlich, ist jedoch eine einfache M?glichkeit, mit JavaScript auf das Element zuzugreifen.
• Inhalt im Element ist nur ein Bitmap -Bild. Dies macht es für Benutzer von assistiven Technologien unzug?nglich. Au?erdem k?nnen Browser, die die Canvas -API nicht unterstützen, in keiner Weise auf den Inhalt zugreifen oder mit ihr interagieren. W?hrend Techniken, die darauf abzielen, zug?nglicher zu machen

Wenn Sie die native Canvas -API verwenden würden, würde Ihr JavaScript ungef?hr so ??aussehen:

<scriptjs/jcanvas.min.js><span><span><span></script</span>></span>
</span><scriptmyCanvas" width<span>="600"</span> height<span>="300"</span>>
  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

fillstyle legt die Hintergrundfarbe des Rechtecks ??fest;

• Strokestyle setzt seine Grenzfarbe;
• Strokewidth setzt die Randbreite der Form;
• x und y stellen die Koordinaten ein, die der horizontalen und vertikalen Position des Rechtecks ??innerhalb der Leinwand entsprechen. Ein Wert von
0
• für x und von 0 für y , d. H. (0, 0), entspricht der oberen linken Ecke der Leinwand. Die X -Koordinaten nehmen nach rechts zu und die Y -Koordinaten nehmen nach unten auf der Leinwand zu. Beim Zeichnen des Rechtecks ??nimmt Jcanvas die X- und Y -Koordinaten in der Mitte der Form ein. Um dies so zu ?ndern, dass x und y der oberen linken Ecke des Rechtecks ??entsprechen, stellen Sie die von Center -Eigenschaft auf false.
• Schlie?lich setzen die Breiten- und H?heneigenschaften die Abmessungen des Rechtecks.

Hier ist eine Demo mit der Rechteckform:

Siehe Pen Jcanvas Beispiel: Rechteck von SitePoint (@sinepoint) auf CodePen.

b?gen und Kreise

b?gen sind Teile des Randes eines Kreises. Mit JCanvas ist das Zeichnen von B?gen nur darum, die gewünschten Werte für einige Eigenschaften innerhalb der Drawarc () -Methode festzulegen:

<script src="js/jquery.min.js><span><span><span></script</span>></span>
</span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
</span><script src="js/script.js><span><span><span></script</span>></span></span>

Zeichnen von B?gen beinhaltet die Festlegung eines Wertes für die RADIUS -Eigenschaft sowie die Start- und Endwinkel in Grad. Wenn Sie m?chten, dass die Richtung Ihres Bogens gegen den Uhrzeigersinn ist, fügen Sie die CCW -Eigenschaft dem obigen Code hinzu und setzen Sie sie auf true.

Hier ist eine Codepen -Demo des obigen Code:

Siehe Pen Jcanvas Beispiel: Bogen von SitePoint (@sinepoint) auf CodePen.

Ein Kreis zeichnen ist so einfach wie die Auslassung von Start- und Endeigenschaften aus der Drawarc () -Methode.

So k?nnen Sie beispielsweise eine einfache Grafik eines l?chelnden Gesichts mit nur Bogenformen zeichnen:

<span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
</span>  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

Denken Sie daran, dass Jcanvas auf der JQuery -Bibliothek basiert. Daher k?nnen Sie JCANVAS -Methoden auf die gleiche Weise ketten, wie Sie JQuery -Methoden ketten k?nnen.

Hier ist, wie der obige Code im Browser rendert:

Siehe Pen Jcanvas Beispiel: L?chelndes Gesicht von sitepoint (@sinepoint) auf CodePen.

Zeichnen von Zeilen und Pfaden

Sie k?nnen schnell Linien mit JCANVAs mit der Drayline () -Methode zeichnen und eine Reihe von Punkten darstellen, mit denen Ihre Linien eine Verbindung herstellen werden.

<span>var canvas = document.getElementById('myCanvas'),
</span>    context <span>= canvas.getContext('2d');</span>

Der obige Code legt die abgerundeten und geschlossenen Eigenschaften auf True fest, wodurch die Ecken der Linie rundet und den verfolgten Pfad schlie?t.

Siehe Pen Jcanvas Beispiel: Verbundene Zeilen von SitePoint (@sinepoint) auf CodePen.

Sie k?nnen auch flexible Pfade mit der Methode DrawPath () zeichnen. Stellen Sie sich einen Pfad als einen oder mehrere angeschlossene Linien, B?gen, Kurven oder Vektoren vor.

Die Methode DrawPath () akzeptiert eine Karte mit Punkten und eine Karte von X- und Y-Koordinaten für die Teilbilder in jedem Punkt. Sie müssen auch den Pfadtyp angeben, den Sie zeichnen, z. B. Linie, Bogen usw.

Hier ist, wie Sie ein Paar angeschlossener horizontaler und vertikaler Pfeile mit Drawpath () zeichnen und Pfeile () zeichnen k?nnen, von denen letztere eine praktische JCANVAS -Methode ist, mit der Sie schnell eine Pfeilform auf die Leinwand zeichnen k?nnen:

<span>// Store the canvas object into a variable
</span><span>var $myCanvas = $('#myCanvas');
</span>
<span>// rectangle shape 
</span>$myCanvas<span>.drawRect({
</span>  <span>fillStyle: 'steelblue',
</span>  <span>strokeStyle: 'blue',
</span>  <span>strokeWidth: 4,
</span>  <span>x: 150, y: 100,
</span>  <span>fromCenter: false,
</span>  <span>width: 200,
</span>  <span>height: 100
</span><span>});</span>

Die x- und y-Koordinaten jedes Teils sind relativ zu den X- und Y-Koordinaten des gesamten Pfades.

Und hier ist das Ergebnis:

Siehe Pen Jcanvas Beispiel: Verbundene Pfeile von SitePoint (@sinepoint) auf CodePen.

Zeichnungstext

Sie k?nnen schnell Text auf der Leinwand mit der treffend benannten DrawText () -Methode zeichnen. Die Haupteigenschaften, die Sie ben?tigen, um zu arbeiten, sind:

• Text. Stellen Sie diese Eigenschaft auf den Textinhalt ein, den Sie auf der Leinwand anzeigen m?chten: z. 'Hallo Welt'
• fontsize. Der Wert für diese Eigenschaft bestimmt die Gr??e des Textes auf Leinwand. Sie k?nnen den Wert für diese Eigenschaft mit einer Zahl festlegen, die JCanvas als Wert in Pixel interpretiert: fontsize: 30. Alternativ k?nnen Sie Punkte verwenden, aber in einem solchen Fall müssen Sie die Messung innerhalb von Zitaten angeben: Schriftgr??e: '30pt '
Mit
• mit der Fontfamilie k?nnen Sie eine Schrift für Ihr Textbild angeben: 'Verdana, sans-serif'.

Hier ist der Beispielcode:

<script src="js/jquery.min.js><span><span><span></script</span>></span>
</span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
</span><script src="js/script.js><span><span><span></script</span>></span></span>

und so sieht es im Element auf der Webseite aus:

Siehe Pen Jcanvas Beispiel: Zeichnen von Text von SitePoint (@sinepoint) auf CodePen.

Zeichnenbilder

Sie k?nnen Bilder mithilfe der Methode DrawImage () importieren und manipulieren. Hier ist ein Beispiel:

<span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
</span>  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

Und so rendert der obige Code:

siehe Pen Jcanvas Beispiel: Importieren und Manipulieren eines Bildes von SitePoint (@sinepoint) auf CodePen.

Sie k?nnen mit allen obigen Beispielen zu einer einzelnen Codepen -Demo hier anzeigen und herumfassen.

Leinwandschichten

Wenn Sie jemals eine Image -Editor -Anwendung wie Photoshop oder GIMP verwendet haben, sind Sie bereits mit Ebenen vertraut. Der coole Teil der Arbeit mit Schichten besteht darin, dass Sie die F?higkeit erlangen, jedes Bild auf Ihrer Leinwand einzeln zu manipulieren, indem Sie es auf seine eigene Ebene zeichnen.

jcanvas bietet eine leistungsstarke Layer-API, die Ihren Canvas-basierten Designs Flexibilit?t verleiht.

Hier finden Sie einen überblick über die Verwendung von JCanvas -Ebenen.

Schichten addieren

Sie k?nnen nur ein Objekt auf jeder Schicht zeichnen. Sie k?nnen Ihrem JCANVAS -Projekt auf zwei Arten Ebenen hinzufügen:

• Verwenden Sie die addlayer () -Methode, gefolgt von der Methode Drasingayers ()
• Stellen Sie die Layer -Eigenschaft in einer der Zeichnungsmethoden auf true
auf.

So wenden Sie die erste Technik zum Zeichnen eines blauen Rechtecks ??an.

<span>var canvas = document.getElementById('myCanvas'),
</span>    context <span>= canvas.getContext('2d');</span>

Siehe den Stift Pzengp von SitePoint (@sitepoint) auf CodePen.

Und hier ist, wie Sie die zweite Methode zum Zeichnen des gleichen Rechtecks ??anwenden:

<span>// Store the canvas object into a variable
</span><span>var $myCanvas = $('#myCanvas');
</span>
<span>// rectangle shape 
</span>$myCanvas<span>.drawRect({
</span>  <span>fillStyle: 'steelblue',
</span>  <span>strokeStyle: 'blue',
</span>  <span>strokeWidth: 4,
</span>  <span>x: 150, y: 100,
</span>  <span>fromCenter: false,
</span>  <span>width: 200,
</span>  <span>height: 100
</span><span>});</span>

Siehe den Stift Zrjqkb von sitepoint (@sinepoint) auf CodePen.

Wie Sie sehen k?nnen, erhalten wir mit jedem der oben genannten das gleiche Ergebnis.

Der wichtige Punkt, der in beiden obigen Code -Beispielen zu bemerken ist, ist, dass die Ebene einen Namen enth?lt, den Sie über die Namenseigenschaft festgelegt haben. Dies erleichtert es einfach, auf diese Ebene im Code zu verweisen und alle m?glichen coolen Dinge damit zu tun, z. B. das ?ndern ihres Indexwert

Mal sehen, wie wir das tun k?nnen.

animierende Ebenen

Sie k?nnen Ihre schichtbasierten Zeichnungen mit JCANVAs mit der Animatelayer () -Methode schnell Animationen hinzufügen. Diese Methode akzeptiert die folgenden Parameter:

Die Layer
• Index oder Name
Ein Objekt mit Schlüsselwertpaaren von Eigenschaften, um
• zu animieren
In Millisekunden
• duration der Animation. Dies ist ein optionaler Parameter. Wenn Sie ihn nicht festlegen, ist es standardm??ig 400 standardm??ig
die
• locking der Animation. Dies ist auch ein optionaler Parameter. Wenn Sie ihn nicht festlegen, ist es standardm??ig zu schwingen
Eine optionale Rückruffunktion, die nach Abschluss der Animation ausgeführt wird.

Sehen wir uns die Animatelayer () -Methode in Aktion an. Wir zeichnen einen halbtransparenten orangefarbenen Kreis auf einer Schicht und animieren dann seine Position, Farbe und Deckkraft:

<script src="js/jquery.min.js><span><span><span></script</span>></span>
</span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
</span><script src="js/script.js><span><span><span></script</span>></span></span>

Schauen Sie sich die Demo unten an, um die Animation zu sehen:

Siehe Pen Jcanvas Beispiel: Animieren von Ebenen von SitePoint (@sitepoint) auf CodePen.

Sie k?nnen alle drei vorherigen Beispiele in dieser Codepen -Demo kombiniert.

draggable Schichten

Eine weitere coole Funktion, auf die ich Ihre Aufmerksamkeit auf sich ziehen m?chte, ist die F?higkeit, eine normale JCANVAS -Ebene in eine schackbare Ebene zu verwandeln, indem Sie einfach die draggable Eigenschaft der Ebene auf wahr einstellen.

Hier ist:

<span><span><span><canvas</span> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></span>
</span>  <span><span><span><p</span>></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></p</span>></span>
</span><span><span><span></canvas</span>></span></span>

Das Snippet oben zeichnet zwei draggierbare Rechteckschichten durch Einbeziehung: draggierbar: true. Beachten Sie au?erdem die Verwendung der Brandtofront -Eigenschaft, die sicherstellt

Schlie?lich dreht der Code die Ebenen und legt einen Box -Schatten fest, um zu zeigen, wie Sie diese Effekte schnell zu Ihren JCanvas -Zeichnungen hinzufügen k?nnen.

Das Ergebnis sieht so aus:

Wenn Sie m?chten, dass Ihre App vor, w?hrend oder nach dem Verschieben einer draggierbaren Ebene etwas tut, erleichtert es JCANVAs, dies zu erreichen, indem Sie dies bei den relevanten Ereignissen unterstützen:

Dragstart -Ausl?ser, wenn Sie die Ebene

ziehen
• Ziehen Sie Feuer, w?hrend Sie die Ebene
ziehen
• DragStop l?st beim Ziehen der Ebene
aus
• DragCancel tritt auf, wenn Sie die Ebene vom Rand der Zeichnungsoberfl?che der Leinwand ziehen.
Nehmen wir an, Sie m?chten eine Nachricht auf der Seite anzeigen, nachdem der Benutzer eine Ebene beendet hat. Sie k?nnen das obige Code -Snippet wiederverwenden, indem Sie dem DragStop -Ereignis eine Rückruffunktion hinzufügen, wie SO:

<script src="js/jquery.min.js><span><span><span></script</span>></span>
</span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
</span><script src="js/script.js><span><span><span></script</span>></span></span>

Nach dem Ziehen eines jeden Quadrats sehen Sie eine Nachricht auf der Seite, in der Sie befinden, welches Farbquadrat Sie gerade fallen gelassen haben. Probieren Sie es in der Demo unten aus:

Siehe die Stift -Draggable -JCanvas -Ebenen mit Callback -Funktion von SitePoint (@sinepoint) auf CodePen.

Schlussfolgerung

In diesem Beitrag habe ich Sie mit JCanvas vorgestellt, einer neuen JQuery-basierten Bibliothek, die mit der HTML5-Canvas-API zusammenarbeitet. Ich habe einige von JCANVAS -Methoden und -eigenschaften illustriert, mit denen Sie schnell auf die Leinwandoberfl?che ziehen, visuelle Effekte, Animationen und draggierbare Schichten hinzufügen k?nnen.

Es gibt so viel mehr, was Sie mit Jcanvas machen k?nnen. Sie k?nnen die JCANVAS -Dokumentation für detaillierte Anleitungen und Beispiele besuchen, die Sie schnell in der Sandbox auf der JCANVAS -Website testen k?nnen.

Um diesen Artikel zu begleiten, habe ich eine grundlegende Malereianwendung auf CodePen mit der Methode jCanvas Drasing () zusammengestellt:

Siehe die Pen -Jcanvas -Maler -App von SitePoint (@sinepoint) auf CodePen.

Fühlen Sie sich frei, es besser zu machen, indem Sie weitere Funktionen hinzufügen und Ihre Ergebnisse mit der SitePoint -Community teilen.

h?ufig gestellte Fragen (FAQs) zu Jcanvas: JQuery trifft HTML5 Canvas

Was ist jcanvas und wie bezieht es sich auf JQuery- und HTML5 -Leinwand? . Es nutzt die Einfachheit und Vielseitigkeit von JQuery, einer schnellen, kleinen und featurereichen JavaScript-Bibliothek und der grafischen Leistung von HTML5-Leinwand, ein HTML-Element, das zum Zeichnen von Grafiken auf einer Webseite verwendet wird. Jcanvas bietet eine einfache und konsistente API zum Zeichnen von Formen, Erstellen von Animationen, Handhabungsereignissen und vielem mehr. Um die JQuery -Bibliothek und die JCANVAS -Bibliothek in Ihre HTML -Datei aufzunehmen. Sie k?nnen diese Bibliotheken von ihren jeweiligen Websites herunterladen oder ein Content Delivery Network (CDN) verwenden. Sobald Sie diese Bibliotheken eingeleitet haben, k?nnen Sie JCANVAS -Funktionen verwenden, um auf die Leinwand zu zeichnen. Beispielsweise k?nnen Sie die Funktion DrawRect () verwenden, um ein Rechteck, die Drawarc () -Funktion zum Zeichnen eines Bogens und die Funktion Drawpolygon () zum Zeichnen eines Polygons zu zeichnen. Jedes dieser Funktionen akzeptiert ein Eigenschaftenobjekt, das die Eigenschaften der Form angibt, wie z. B. seine Position, Gr??e, Farbe usw.

Kann ich Formen mit jCanvas animieren? Sie k?nnen die Funktion Animate () verwenden, um die Eigenschaften einer Form über eine bestimmte Dauer zu animieren. Diese Funktion verwendet die JQuery Animation Engine, sodass sie alle von JQuery bereitgestellten Lockerungsfunktionen unterstützt. Sie k?nnen beispielsweise die Funktion click () verwenden, um Click -Ereignisse, die Funktion mouseover () zu verarbeiten, um Mausover -Ereignisse zu verarbeiten, und die Funktion mouseDown (), um MouseDown -Ereignisse zu verarbeiten. Jedes dieser Funktionen akzeptiert eine Rückruffunktion, die auf dem Laufenden aufgerufen wird. Auf einer Webseite. Es bietet eine breite Palette von Funktionen, um Formen zu zeichnen, Animationen zu erstellen, Ereignisse zu behandeln und vieles mehr. Mit JCanvas k?nnen Sie alles von einfachen Formen bis hin zu komplexen Animationen und interaktiven Grafiken erstellen. Dies umfasst die neuesten Versionen von Google Chrome, Mozilla Firefox, Apple Safari und Microsoft Edge. Es unterstützt jedoch keinen Internet Explorer 8 oder früher, da diese Browser das HTML5 -Canvas -Element nicht unterstützen. Sie k?nnen die Konsole auf Fehlermeldungen überprüfen, da JCANVAS detaillierte Fehlermeldungen bereitstellt, mit denen Sie Probleme beheben k?nnen. Sie k?nnen sich auch auf die JCANVAS -Dokumentation beziehen, die umfassende Informationen über die Bibliothek und ihre Funktionen liefert. Dies bedeutet, dass Sie es sowohl in pers?nlichen als auch in kommerziellen Projekten kostenlos verwenden k?nnen. Sie müssen jedoch den ursprünglichen Urheberrechtshinweis und den Haftungsausschluss in eine Kopie der Software oder ihre Dokumentation einbeziehen. Auf der offiziellen Website, die eine umfassende Dokumentation, Beispiele und Tutorials enth?lt. Sie k?nnen auch nützliche Informationen zu Websites und Foren für Webentwicklung finden, z. B. Stack Overflow und SitePoint.

Das obige ist der detaillierte Inhalt vonEinführung in Jcanvas: JQuery trifft HTML5 -Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!