Maison > interface Web > js tutoriel > Introduction à JCanvas: JQuery rencontre HTML5 Canvas

Introduction à JCanvas: JQuery rencontre HTML5 Canvas

Jennifer Aniston
Libérer: 2025-02-18 10:06:11
original
398 Les gens l'ont consulté

Introduction à JCanvas: JQuery rencontre HTML5 Canvas

html5 vous permet de dessiner des graphiques directement dans votre page Web à l'aide de l'élément et de son API JavaScript associée.

Dans cet article, je vais vous présenter JCanvas, une bibliothèque basée sur JQuery gratuite et open source pour l'API HTML5 Canvas.

Si vous développez avec jQuery, JCanvas facilite et plus rapide des dessins de toile cool et des applications interactives à l'aide de la syntaxe jQuery.

Les plats clés

  • JCanvas est une bibliothèque libre et open source qui intègre jQuery à l'API HTML5 Canvas, simplifiant la création de graphiques et d'applications interactives à l'aide de la syntaxe jQuery.
  • Pour utiliser JCanvas, le script JCanvas et JQuery doivent être inclus dans votre projet, permettant l'utilisation de méthodes JCanvas qui sont fondées sur la structure de JQuery.
  • JCANVAS améliore l'API de toile native avec des fonctionnalités supplémentaires telles que les couches, les événements, la glisser-déposer et l'animation, tout en maintenant la compatibilité avec les méthodes de toile native.
  • Les formes de dessin, le texte et les images sur la toile sont rationalisées via JCanvas, avec des méthodes comme Drawrect (), Drawarc () et Drawimage () qui acceptent diverses propriétés personnalisables.
  • JCANVAS prend en charge des fonctionnalités avancées comme la manipulation et l'animation de couche, permettant des créations graphiques complexes et des expériences utilisateur interactives dynamiques sur les pages Web.

Qu'est-ce que JCanvas?

Le site Web de JCanvas explique:

JCANVAS est une bibliothèque JavaScript, écrite à l'aide de jQuery et pour jQuery, qui s'enroule autour de l'API du canevas HTML5, ajoutant de nouvelles fonctionnalités et capacités, dont beaucoup sont personnalisables. Les capacités incluent des couches, des événements, des glisser-déposer, une animation et bien plus encore.

Le résultat est une API flexible enveloppée dans une syntaxe sucrée de jQuery-esque qui apporte de la puissance et de la facilité à la toile HTML5.

JCANVAS vous permet de faire tout ce que vous pouvez faire avec l'API Canvas native et plus encore. Si vous préférez, vous pouvez également utiliser des méthodes d'API canevas HTML5 natives avec JCanvas. La méthode Draw () sert à cet objectif. De plus, vous pouvez facilement étendre les JCanvas avec vos propres méthodes et propriétés en utilisant sa fonctionnalité ().

Ajout de JCanvas à votre projet

Pour inclure JCanvas dans votre projet, téléchargez le script sur le site officiel ou la page GitHub, puis incluez-le dans votre dossier de projet. Comme mentionné, JCanvas a besoin que jQuery fonctionne, alors assurez-vous de l'inclure aussi.

Les fichiers de script de votre projet ressembleront à ceci:

<scriptjs/jcanvas.min.js><span><span><span></script</span>></span>
</span><scriptendroit où vous mettez votre JavaScript personnalisé à l'aide de l'API JCanvas. Prenons maintenant JCanvas pour un essai routier. 
<h2> Configuration du document HTML </h2>
<p> pour suivre les exemples, commencez par ajouter une balise d'élément <ayeyle> à un document HTML5 de base. </ayeyle></p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Voici quelques points d'intérêt sur l'extrait de code ci-dessus.

Si vous deviez utiliser l'API Canvas native, votre javascript ressemblerait à ceci:

<scriptjs/jcanvas.min.js><span><span><span></script</span>></span>
</span><scriptobjet Canvas. C'est cette propriété qui vous permet d'accéder à toutes les autres propriétés et méthodes exposées par l'API HTML5 Canvas. 
<p> Si vous souhaitez en savoir plus sur le sujet, le tutoriel HTML5 Canvas: une introduction d'Ivaylo Gerchev est une excellente lecture. </p>
<p> Les méthodes et propriétés JCanvas contiennent déjà une référence au contexte 2D, vous pouvez donc sauter directement dans le dessin. </p>
<h2> Dessin de formes avec jcanvas </h2>
<p> La plupart des méthodes JCanvas acceptent une carte des paires de valeurs de propriété que vous pouvez énumérer dans n'importe quel ordre que vous aimez. </p>
<p> Commençons par dessiner une forme rectangulaire. </p>
<h3> la forme rectangulaire </h3>
<p> C'est ainsi que vous dessinez une forme rectangulaire à l'aide de la méthode DrawRect () de l'objet JCanvas. </p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

l'extrait au-dessus cache l'objet Canvas dans une variable appelée $ myCanvas. Les propriétés à l'intérieur de la méthode Drawrect () sont principalement explicites, mais voici un bref aperçu:

Introduction à JCanvas: JQuery rencontre HTML5 Canvas

Voici une démo avec la forme rectangulaire:

Voir le stylo JCanvas Exemple: rectangle par SitePoint (@SitePoint) sur codepen.

arcs et cercles

Les arcs sont des parties du bord d'un cercle. Avec JCanvas, Dessin Arcs n'est qu'une question de définition des valeurs souhaitées pour quelques propriétés à l'intérieur de la méthode DrawArc ():

<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>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Les arcs de dessin impliquent la définition d'une valeur pour la propriété RADIUS ainsi que les angles de début et de fin en degrés. Si vous souhaitez que la direction de votre arc soit dans le sens antihoraire, ajoutez la propriété CCW au code ci-dessus et définissez-la sur true.

Voici une démo de codepen du code ci-dessus:

Voir le stylo JCanvas Exemple: arc par SitePoint (@SitePoint) sur Codepen.

Le dessin d'un cercle est aussi simple que d'omettre les propriétés de démarrage et de fin de la méthode DrawArc ().

Par exemple, voici comment vous pouvez dessiner un graphique simple d'un visage souriant en utilisant uniquement des formes d'arc:

<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>
Copier après la connexion
Copier après la connexion
Copier après la connexion

N'oubliez pas que JCanvas est basé sur la bibliothèque JQuery, vous pouvez donc enchaîner les méthodes JCanvas de la même manière que vous pouvez enchaîner les méthodes JQuery.

Voici comment le code ci-dessus rend dans le navigateur:

Voir le stylo JCanvas Exemple: Face souriante par SitePoint (@SitePoint) sur Codepen.

Lignes de dessin et chemins

Vous pouvez rapidement dessiner des lignes avec JCanvas en utilisant la méthode Drawline () et tracer une série de points auxquels vos lignes vont se connecter.

<span>var canvas = document.getElementById('myCanvas'),
</span>    context <span>= canvas.getContext('2d');</span>
Copier après la connexion
Copier après la connexion

Le code ci-dessus définit les propriétés arrondies et fermées à True, en arrondant ainsi les coins de la ligne et en fermant le chemin tracé.

Voir l'exemple de Pen JCanvas: lignes connectées par SitePoint (@SitePoint) sur Codepen.

Vous pouvez également dessiner des chemins flexibles en utilisant la méthode DrawPath (). Considérez un chemin comme une ou plusieurs lignes, arcs, courbes ou vecteurs connectés.

La méthode DrawPath () accepte une carte des points et une carte des coordonnées x et y pour les sous-pains à l'intérieur de chaque point. Vous devez également spécifier le type de chemin que vous allez dessiner, par exemple, ligne, arc, etc.

Voici comment dessiner une paire de flèches pointant horizontalement et verticalement en utilisant des flèches de dessin () et dessiner des flèches (), ce dernier est une méthode jcanvas pratique qui vous permet de dessiner rapidement une forme de flèche sur la toile:

<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>
Copier après la connexion
Copier après la connexion

Les coordonnées x et y de chaque sous-chemin sont relatives aux coordonnées x et y de tout le chemin.

Et voici le résultat:

Voir l'exemple de Pen JCanvas: Arrows connectés par SitePoint (@SitePoint) sur Codepen.

Texte de dessin

Vous pouvez rapidement dessiner du texte sur le canevas avec la méthode bien nommée DrawText (). Les principales propriétés dont vous avez besoin pour que cela fonctionne est:

Voici l'exemple de code:

<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>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Et c'est à quoi il ressemble à l'intérieur de l'élément de la page Web:

Voir le stylo JCanvas Exemple: Drawing Text by SitePoint (@SitePoint) sur Codepen.

Dessin Images

Vous pouvez importer et manipuler des images à l'aide de la méthode DrawImage (). Voici un exemple:

<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>
Copier après la connexion
Copier après la connexion
Copier après la connexion

Et c'est ainsi que le code ci-dessus rend:

Voir l'exemple de Pen JCanvas: Importation et manipulation d'une image par SitePoint (@SitePoint) sur Codepen.

Vous pouvez visualiser et jouer avec tous les exemples ci-dessus combinés en une seule démo de codepen ici.

couches de toile

Si vous avez déjà utilisé une application d'éditeur d'image comme Photoshop ou GIMP, vous connaissez déjà les couches. La partie cool de travailler avec des couches est que vous gagnez la possibilité de manipuler chaque image sur votre toile individuellement, en le dessinant sur sa propre couche.

JCANVAS propose une API de couche puissante qui ajoute de la flexibilité à vos conceptions basées sur la toile.

Voici un aperçu de la façon d'utiliser les couches JCanvas.

Ajout de couches

Vous ne pouvez dessiner qu'un seul objet sur chaque couche. Vous pouvez ajouter des couches à votre projet JCanvas de deux manières:

Voici comment vous appliquez la première technique pour dessiner un rectangle bleu.

<span>var canvas = document.getElementById('myCanvas'),
</span>    context <span>= canvas.getContext('2d');</span>
Copier après la connexion
Copier après la connexion

Voir le stylo Pzengp par SitePoint (@SitePoint) sur Codepen.

Et voici comment vous appliquez la deuxième méthode pour dessiner le même rectangle:

<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>
Copier après la connexion
Copier après la connexion

Voir le stylo zrjqkb par SitePoint (@SitePoint) sur Codepen.

Comme vous pouvez le voir, avec chacun des éléments ci-dessus, nous obtenons le même résultat.

Le point important à noter dans les deux échantillons de code ci-dessus est que la couche a un nom que vous définissez via la propriété du nom. Cela facilite la référence à cette couche en code et fait toutes sortes de choses cool avec, comme changer sa valeur d'index, l'animer, le supprimer, etc.

Voyons comment nous pouvons faire cela.

Animer les couches

Vous pouvez rapidement ajouter des animations à vos dessins basés sur des calques avec JCanvas en utilisant la méthode AnimateLayer (). Cette méthode accepte les paramètres suivants:

Voyons la méthode AnimateLayer () en action. Nous dessinerons un cercle orange semi-transparent sur un calque, puis animer ses propriétés de position, de couleur et d'opacité:

<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>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Découvrez la démo ci-dessous pour voir l'animation:

Voir l'exemple de la Pen JCanvas: Animation des couches par SitePoint (@SitePoint) sur Codepen.

Vous pouvez afficher les trois exemples précédents combinés dans cette démo de codepen.

couches dragables

Une autre fonctionnalité cool sur laquelle je voudrais attirer votre attention est la possibilité de transformer une couche JCanvas ordinaire en une couche dragable en définissant simplement la propriété dragable de la couche sur true.

Voici comment:

<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>
Copier après la connexion
Copier après la connexion
Copier après la connexion

L'entraînement ci-dessus dessine deux couches rectangulaires draggables en incorporant: draggable: true. Notez également l'utilisation de la propriété Bringtofront, qui garantit que lorsque vous faites glisser une couche, elle est automatiquement poussée à l'avant de toutes les autres couches existantes.

Enfin, le code fait pivoter les calques et définit une ombre de boîte, juste pour montrer comment vous pouvez rapidement ajouter ces effets à vos dessins JCanvas.

Le résultat ressemble à ceci:

Introduction à JCanvas: JQuery rencontre HTML5 Canvas

Si vous souhaitez que votre application fasse quelque chose avant, pendant ou après avoir déplacé une couche dragable, JCanvas facilite la réalisation de cela en prenant en charge les fonctions de rappel lors des événements pertinents:

Disons que vous souhaitez afficher un message sur la page une fois que l'utilisateur a fini de faire glisser un calque. Vous pouvez réutiliser l'extrait de code ci-dessus en ajoutant une fonction de rappel à l'événement dragstop, comme ainsi:

<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>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Après avoir fait glisser chaque carré, vous verrez un message sur la page vous indiquant quelle couleur carrée vous venez de laisser tomber. Essayez-le dans la démo ci-dessous:

Voir les couches JCanvas Draggable Pen avec la fonction de rappel par SitePoint (@SitePoint) sur Codepen.

Conclusion

Dans cet article, je vous ai présenté JCanvas, une nouvelle bibliothèque basée sur JQuery qui fonctionne avec l'API HTML5 Canvas. J'ai illustré certaines des méthodes et propriétés JCanvas qui vous permettent rapidement de dessiner sur la surface du toile, d'ajouter des effets visuels, des animations et des couches dragables.

Il y a tellement plus que vous pouvez faire avec JCanvas. Vous pouvez visiter la documentation JCanvas pour des conseils et des exemples détaillés, que vous pouvez rapidement tester dans le bac à sable sur le site Web de JCanvas.

Pour accompagner cet article, j'ai mis en place une application de peinture de base sur Codepen en utilisant la méthode JCanvas Drawline ():

Voir l'application de peinture Pen JCanvas par SitePoint (@SitePoint) sur Codepen.

N'hésitez pas à l'améliorer en ajoutant plus de fonctionnalités et en partageant vos résultats avec la communauté SitePoint.

Questions fréquemment posées (FAQ) sur JCanvas: JQuery rencontre HTML5 Canvas

Qu'est-ce que JCANVAS et comment se rapporte-t-il à JQuery et Html5 Canvas?

JCANVAS est une puissante bibliothèque JavaScript qui combine les capacités de JQuery et HTML5 pour simplifier le processus de création de graphiques complexes sur une page Web et HTML5 . Il tire parti de la simplicité et de la polyvalence de JQuery, d'une bibliothèque JavaScript rapide, petite et riche en fonctionnalités, et la puissance graphique de la toile HTML5, qui est un élément HTML utilisé pour dessiner des graphiques sur une page Web. JCanvas fournit une API simple et cohérente pour dessiner des formes, la création d'animations, la manipulation des événements et bien plus encore.

Comment puis-je commencer avec JCanvas?

Pour commencer avec JCanvas, vous avez d'abord besoin Pour inclure la bibliothèque JQuery et la bibliothèque JCanvas dans votre fichier HTML. Vous pouvez télécharger ces bibliothèques à partir de leurs sites Web respectifs ou utiliser un réseau de livraison de contenu (CDN). Une fois que vous avez inclus ces bibliothèques, vous pouvez commencer à utiliser des fonctions JCanvas pour dessiner sur le canevas.

Comment puis-je dessiner des formes à l'aide de JCanvas?

JCanvas fournit plusieurs fonctions pour dessiner des formes sur la toile. Par exemple, vous pouvez utiliser la fonction DrawRect () pour dessiner un rectangle, la fonction DrawArc () pour dessiner un arc et la fonction DrawPolygon () pour dessiner un polygone. Chacune de ces fonctions accepte un objet de propriétés qui spécifie les caractéristiques de la forme, telles que sa position, sa taille, sa couleur, etc.

Puis-je animer les formes avec JCanvas?

Oui, JCanvas fournit une fonction d'animation puissante qui vous permet d'animer des formes sur la toile. Vous pouvez utiliser la fonction animate () pour animer les propriétés d'une forme sur une durée spécifiée. Cette fonction utilise le moteur d'animation jQuery, donc il prend en charge toutes les fonctions de soulagement fournies par jQuery.

Comment puis-je gérer les événements avec JCanvas?

JCANVAS fournit plusieurs fonctions pour gérer les événements sur la toile. Par exemple, vous pouvez utiliser la fonction Click () pour gérer les événements de clic, la fonction MouseOver () pour gérer les événements Mouseover et la fonction Mousedown () pour gérer les événements MousDown. Chacune de ces fonctions accepte une fonction de rappel qui est appelée lorsque l'événement se produit.

Puis-je utiliser JCanvas pour créer des graphiques complexes?

Oui, JCanvas est conçu pour simplifier le processus de création de graphiques complexes sur une page Web. Il fournit une large gamme de fonctions pour dessiner des formes, créer des animations, manipuler des événements et bien plus encore. Avec JCanvas, vous pouvez créer n'importe quoi, des formes simples aux animations complexes et aux graphiques interactifs.

JCANVAS est-il compatible avec tous les navigateurs?

JCANVAS est compatible avec tous les navigateurs modernes qui prennent en charge l'élément Canvas HTML5. Cela comprend les dernières versions de Google Chrome, Mozilla Firefox, Apple Safari et Microsoft Edge. Cependant, il ne prend pas en charge Internet Explorer 8 ou plus tôt, car ces navigateurs ne prennent pas en charge l'élément HTML5 Canvas.

Comment puis-je résoudre les problèmes avec JCanvas?

Si vous rencontrez des problèmes avec JCanvas, Vous pouvez vérifier la console pour les messages d'erreur, car JCanvas fournit des messages d'erreur détaillés pour vous aider à résoudre les problèmes. Vous pouvez également vous référer à la documentation JCanvas, qui fournit des informations complètes sur la bibliothèque et ses fonctions.

Puis-je utiliser JCanvas dans des projets commerciaux?

Oui, JCanvas est publié sous la licence MIT, Ce qui signifie que vous pouvez l'utiliser gratuitement dans des projets personnels et commerciaux. Cependant, vous devez inclure l'avis de droit d'auteur d'origine et la clause de non-responsabilité dans n'importe quelle copie du logiciel ou de sa documentation.

où puis-je trouver plus de ressources sur JCanvas?

Vous pouvez trouver plus de ressources sur JCanvas sur Son site officiel, qui fournit une documentation complète, des exemples et des tutoriels. Vous pouvez également trouver des informations utiles sur les sites Web de développement Web et les forums, tels que Stack Overflow et SitePoint.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Article précédent:Créez votre propre extension chrome à l'aide d'Angular 2 & TypeScript Article suivant:6 démos de défilement Infini JQuery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal