Einführung in Jcanvas: JQuery trifft HTML5 -Leinwand

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><span><span><span></span>></span>
</span><scriptmycanvas> width<span>="600"</span> height<span>="300"</span>>
  <span><span><span><p>></p></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></span>></span>
</span><span><span><span></span>></span></span></span></scriptmycanvas></scriptjs>

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><span><span><span></span>></span>
</span><scriptmycanvas> width<span>="600"</span> height<span>="300"</span>>
  <span><span><span><p>></p></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></span>></span>
</span><span><span><span></span>></span></span></span></scriptmycanvas></scriptjs>

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%20><span%20><span%20></script</span>></span>%0A</span><script%20src=" js><span ><span ><span ></script>>
<script src="js/script.js><span%20><span%20><span%20></script</span>></span></span>

%0A%0A

%20Zeichnen%20von%20B%C3%B6gen%20beinhaltet%20die%20Festlegung%20eines%20Wertes%20f%C3%BCr%20die%20RADIUS%20-Eigenschaft%20sowie%20die%20Start-%20und%20Endwinkel%20in%20Grad.%20Wenn%20Sie%20m%C3%B6chten,%20dass%20die%20Richtung%20Ihres%20Bogens%20gegen%20den%20Uhrzeigersinn%20ist,%20f%C3%BCgen%20Sie%20die%20CCW%20-Eigenschaft%20dem%20obigen%20Code%20hinzu%20und%20setzen%20Sie%20sie%20auf%20true.%20

%0A

%20Hier%20ist%20eine%20Codepen%20-Demo%20des%20obigen%20Code:%20

%0A 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 id<span >="myCanvas" width<span >="600" height<span >="300">
  <span ><span ><span ><p>This is fallback content 
  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span ><span ><span >>
<span ><span ><span >></script>

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%20><span%20><span%20></script</span>></span>%0A</span><script%20src=" js><span ><span ><span ></script>>
<script src="js/script.js><span%20><span%20><span%20></script</span>></span></span>

%0A%0A

%20und%20so%20sieht%20es%20im%20Element%20%20auf%20der%20Webseite%20aus:%20

%0A 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 id<span >="myCanvas" width<span >="600" height<span >="300">
  <span ><span ><span ><p>This is fallback content 
  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span ><span ><span >>
<span ><span ><span >></script>

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%20><span%20><span%20></script</span>></span>%0A</span><script%20src=" js><span ><span ><span ></script>>
<script src="js/script.js><span%20><span%20><span%20></script</span>></span></span>

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

%0A

%20Siehe%20Pen%20Jcanvas%20Beispiel:%20Animieren%20von%20Ebenen%20von%20SitePoint%20(@sitepoint)%20auf%20CodePen.%20 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 id<span >="myCanvas" width<span >="600" height<span >="300">
  <span ><span ><span ><p>This is fallback content 
  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span ><span ><span >>
<span ><span ><span >></script>

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%20><span%20><span%20></script</span>></span>%0A</span><script%20src=" js><span ><span ><span ></script>>
<script src="js/script.js><span%20><span%20><span%20></script</span>></span></span>

%0A%0A

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

%0A 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!