Tutoriel HTML5 Canvas: une introduction

Les plats clés

• HTML5 Canvas est une technologie puissante qui permet aux développeurs de dessiner des graphiques et de créer des animations directement dans un navigateur à l'aide de JavaScript. L'élément de toile est défini en code HTML en utilisant des attributs de largeur et de hauteur, et sa véritable puissance est exploitée via l'API HTML5 Canvas.
• La fonctionnalité HTML5 Canvas est interactive, capable d'animation, flexible et prise en charge par tous les principaux navigateurs. Il peut être utilisé pour une gamme d'applications, notamment les jeux, la publicité, la représentation des données, l'éducation et la formation, et l'art et la décoration.
• Pour utiliser le canevas HTML5, un développeur a besoin d'un éditeur de code et d'un navigateur avec support HTML5 Canvas. Un élément de toile est créé dans HTML, et JavaScript est utilisé pour accéder à la zone de toile via un ensemble complet de fonctions de dessin, permettant la génération de graphiques dynamiques.
• HTML5 Canvas a un système de coordonnées unique où l'origine est placée dans le coin supérieur gauche de la toile. Les coordonnées x augmentent à droite et les coordonnées Y augmentent vers le bas de la toile. Ce système n'a pas de points négatifs visibles, donc les objets positionnés à l'aide de points de coordonnées négatifs n'apparaîtront pas sur la page.

Intéressé par l'animation CSS? Consultez la création d'animations avec CSS, un cours complet sur les transitions CSS et l'animation des immeubles clés par le développeur Web expert Donovan Hutchinson, disponible pour les membres du site. Pour un échantillon d'animations de toile HTML5, regardez les illustrations avec le canevas HTML5 ci-dessous, c'est une vidéo de notre début d'animation avec le mini-cours HTML5 Mini.

Chargement du joueur…

L'un des instruments les plus importants de la boîte à outils d'un peintre est leur toile. Cela leur donne la liberté d'exprimer toutes sortes de sentiments, d'impressions, d'idées, etc., dans des variations et des combinaisons presque illimitées. Et cette liberté ne peut être limitée que par deux choses - leur niveau de compétence et leur imagination.

La situation dans le monde du développement Web est similaire. Avec les progrès en cours de HTML5 et de ses spécifications puissantes, les développeurs Web ont acquis la capacité de faire des choses impossibles dans le passé. Dessiner des graphiques et la création d'animations directement dans le navigateur est désormais complètement possible grâce à une technologie appelée HTML5 Canvas.

Qu'est-ce que la toile HTML5?

L'élément Canvas est un élément défini dans le code HTML en utilisant la largeur et les attributs de hauteur. Cependant, la véritable puissance de l'élément de toile est accomplie en profitant de l'API HTML5 Canvas. Cette API est utilisée en écrivant JavaScript qui peut accéder à la zone Canvas à travers un ensemble complet de fonctions de dessin, permettant ainsi des graphiques générés dynamiquement.

Qu'est-ce qui est si génial dans la toile HTML5?

Voici quelques raisons pour lesquelles vous voudrez peut-être envisager d'apprendre à utiliser la fonctionnalité de toile de HTML5:

• Interactivité. La toile est entièrement interactive. Il peut répondre aux actions d'un utilisateur en écoutant des événements de clavier, de souris ou de toucher. Ainsi, un développeur n'est pas limité aux seuls graphiques et images statiques.
• Animation. Chaque objet dessiné sur la toile peut être animé. Cela permet de créer tous les niveaux d'animations, des simples balles rebondissantes à la cinématique complexe et inverse.
• flexibilité. Les développeurs peuvent créer à peu près tout ce qui utilise Canvas. Il peut afficher des lignes, des formes, du texte, des images, etc. - avec ou sans animation. De plus, l'ajout de vidéos et / ou d'audio à une application de toile est également possible.
• Prise en charge du navigateur / plate-forme. HTML5 Canvas est pris en charge par tous les principaux navigateurs et peut être accessible sur un large éventail d'appareils, y compris des ordinateurs de bureau, des tablettes et des téléphones intelligents.
• popularité. La popularité de la toile augmente rapidement et régulièrement, il n'y a donc pas de pénurie de ressources disponibles.
• C'est une norme Web. Contrairement à Flash et Silverlight, Canvas est une technologie ouverte qui fait partie de HTML5. Et bien que toutes ses fonctionnalités ne soient pas mises en œuvre dans tous les navigateurs, les développeurs peuvent être certaines toiles seront indéfiniment.
Développer une fois, courir partout. HTML5 Canvas offre une grande portabilité. Une fois créé, contrairement à Flash et Silverlight, une application Canvas peut fonctionner presque n'importe où - des plus grands ordinateurs aux plus petits appareils mobiles.
Outils de développement gratuits et accessibles. Les outils de base pour créer des applications de canevas HTML5 ne sont qu'un navigateur et un bon éditeur de code. De plus, il existe de nombreuses bibliothèques et outils formidables pour aider les développeurs à développer une toile avancée.

Quelles applications pouvez-vous créer avec la toile HTML5?

ok, la toile est super. Mais pourquoi peut-il l'utiliser exactement? Voyons voir.

jeu. L'ensemble de fonctionnalités du canevas HTML5 est un candidat idéal pour produire toutes sortes de jeux 2D et 3D.
publicité. HTML5 Canvas est un excellent remplacement pour les bannières et les annonces basées sur des flash. Il a toutes les fonctionnalités nécessaires pour attirer l'attention des acheteurs.
Représentation des données. HTML5 peut collecter des données à partir de sources de données globales et les utiliser pour générer des graphiques et des graphiques attrayants visuellement et interactifs avec l'élément de toile.
Éducation et formation. La toile HTML5 peut être utilisée pour produire des expériences d'apprentissage efficaces et attrayantes, combinant du texte, des images, des vidéos et de l'audio.
Art et décoration. Avec un peu d'imagination et la grande variété de couleurs, de gradients, de motifs, de transparence, d'ombres et de caractéristiques de coupure, toutes sortes de graphiques artistiques et décoratifs peuvent être dessinés.

Maintenant que nous savons pourquoi nous devrions apprendre la toile, regardons les bases de la toile HTML5 et comment commencer à l'utiliser.

Les contextes de rendu de toile

Chaque élément de canevas HTML5 doit avoir un contexte . Le contexte définit l'api HTML5 Canvas que vous utiliserez. Le contexte 2D est utilisé pour dessiner des graphiques 2D et manipuler les images bitmap. Le contexte 3D est utilisé pour la création et la manipulation graphiques 3D. Ce dernier est en fait appelé webgl et il est basé sur OpenGL es.

Pour commencer

Pour commencer avec Canvas, tout ce dont vous avez besoin est un éditeur de code et un navigateur avec support HTML5 Canvas. J'utilise un texte sublime et Google Chrome, mais vous pouvez utiliser ce que vous voulez.

Notre html pour commencer ressemblera à ceci:

<span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
</span>
  <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
</span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
</span>    Please check caniuse.com/#feat=canvas for information on 
    browser support for canvas.<span><span><span></p</span>></span>
</span>
  <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
</span><span>                 if the browser doesn't support canvas -->
</span>
<span><span><span></canvas</span>></span></span>

Et voici notre javascript, que nous pouvons inclure au bas de notre page HTML:

<span>var canvas = document.getElementById('exampleCanvas'),
</span>    context <span>= canvas.getContext('2d');
</span>
    <span>// code examples will continue here...</span>

Par défaut, le navigateur crée des éléments de toile avec une largeur de 300 pixels et une hauteur de 150 pixels, même si ceux-ci ne sont pas spécifiés dans le HTML. Vous pouvez modifier la taille en spécifiant la largeur et la hauteur, comme je l'ai fait dans le HTML.

Notez également que nous avons donné au Canvas un attribut ID que nous utiliserons dans notre JavaScript. Et enfin, si vous le souhaitez, vous pouvez utiliser CSS pour ajouter une bordure pour rendre la toile visible au moyen d'un cadre mince. Ce n'est pas nécessaire, il est utilisé comme aide visuelle pour nous de voir la limite de l'élément de toile.

Remarquez qu'entre les balises d'ouverture et de fermeture , j'ai ajouté du contenu qui sera affiché si le navigateur ne prend pas en charge Canvas. Cela peut être à peu près n'importe quel type de contenu qu'un navigateur plus ancien prend en charge.

Le JavaScript commence par deux lignes. Dans la première ligne, nous créons une variable qui cache notre élément Canvas via son ID. La deuxième ligne crée une variable (contexte) qui fait référence au contexte 2D pour le canevas à l'aide de la fonction getContext (). Nous utiliserons la variable de contexte pour accéder à toutes les fonctions et propriétés de dessin du canevas.

Avec notre toile prête à partir, nous pouvons commencer à expérimenter avec l'API Canvas. Mais avant cela, clarifions quelques autres aspects de la fonction de toile.

HTML5 Taille de l'élément de toile par rapport à la taille de la surface du dessin

Outre les attributs de largeur et de hauteur de l'élément Canvas, vous pouvez également utiliser CSS pour définir la taille d'un élément de toile. Cependant, le dimensionnement d'un élément de canevas avec CSS n'est pas le même que la définition des attributs de largeur et de hauteur de l'élément. En effet, une toile a en fait deux tailles: la taille de l'élément lui-même et la taille de la surface de dessin de l'élément.

Lorsque vous définissez les attributs de largeur et de hauteur de l'élément, vous définissez à la fois la taille de l'élément et la taille de la surface de dessin de l'élément; Cependant, lorsque vous utilisez CSS pour dimensionner un élément de toile, vous définissez uniquement la taille de l'élément et non la surface de dessin. Lorsque la taille de l'élément Canvas ne correspond pas à la taille de sa surface de dessin, le navigateur fait évoluer la surface de dessin pour s'adapter à l'élément.

Pour cette raison, c'est une bonne idée d'utiliser les attributs de largeur et de hauteur de l'élément Canvas pour dimensionner l'élément, au lieu d'utiliser CSS.

Comprendre le système de coordonnées sur toile

Dans un espace 2D, les positions sont référencées à l'aide de coordonnées x et y. L'axe x s'étend horizontalement et l'axe y s'étend verticalement. Le centre a une position x = 0 et y = 0, qui peut également être exprimée (0, 0). Cette méthode de positionnement des objets, utilisée en mathématiques, est connue sous le nom de système de coordonnées cartésiennes.

Le système de coordonnées sur toile, cependant, place l'origine dans le coin supérieur gauche de la toile, les coordonnées x augmentant vers les coordonnées droite et y augmentant vers le bas de la toile. Contrairement à un espace de coordonnées cartésiennes standard, l'espace de toile n'a pas de points négatifs visibles. L'utilisation de coordonnées négatives ne fera pas échouer votre application, mais les objets positionnés à l'aide de points de coordonnées négatifs n'apparaîtront pas sur la page.

Exemples de toile de base

Comme mentionné, le canevas HTML5 vous permet de créer de nombreux types d'objets, y compris les lignes, les courbes, les chemins, les formes, le texte, etc. Dans les exemples à suivre, vous pouvez voir comment certains de ces objets sont réellement dessinés. Je n'irai pas en détail sur l'API Canvas; Ce sont juste faciles à vous aider à comprendre le fonctionnement de Canvas.

Lignes de dessin

Pour tracer une ligne, nous utilisons quatre méthodes API Canvas. Nous commençons par la méthode beginPath () qui demande au navigateur de se préparer à dessiner un nouveau chemin. Ensuite, nous utilisons la méthode MoveTo (x, Y) pour définir le point de départ de la ligne. Ensuite, la méthode LineTo (x, Y) définit le point de fin et trace la ligne en connectant les deux points.

À ce stade, la ligne sera tracée, mais elle est toujours invisible. Pour le rendre visible, nous utilisons la méthode TRAD () pour afficher la ligne avec la couleur noire par défaut.

<span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
</span>
  <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
</span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
</span>    Please check caniuse.com/#feat=canvas for information on 
    browser support for canvas.<span><span><span></p</span>></span>
</span>
  <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
</span><span>                 if the browser doesn't support canvas -->
</span>
<span><span><span></canvas</span>></span></span>

Voir l'exemple de ligne du canevas Pen par SitePoint (@SitePoint) sur Codepen.

dessiner rectangle

Pour dessiner un rectangle, nous pouvons utiliser la méthode Fillrect (x, y, largeur, hauteur) pour définir les coordonnées et les dimensions, ainsi que la propriété FillStyle pour définir la couleur de remplissage.

<span>var canvas = document.getElementById('exampleCanvas'),
</span>    context <span>= canvas.getContext('2d');
</span>
    <span>// code examples will continue here...</span>

Voir l'exemple rectangle du canevas Pen par SitePoint (@SitePoint) sur codepen.

Notez que le rectangle est positionné près du coin supérieur gauche.

dessiner du texte

pour dessiner du texte sur la toile, nous pouvons utiliser FillText (String, X, Y) avec la propriété de police pour définir la police, la taille et le style du texte (similaire à la police raccourci dans CSS).

context<span>.beginPath();
</span>context<span>.moveTo(50, 50);
</span>context<span>.lineTo(250, 150);
</span>context<span>.stroke();</span>

Voir l'exemple de texte du canevas Pen par SitePoint (@SitePoint) sur Codepen.

Vous devez savoir que, bien que un dessin simple avec l'API HTML5 Canvas soit facile, la création de formes et d'animations complexes nécessite des connaissances mathématiques et physiques. L'un des meilleurs livres sur ce sujet est l'animation HTML5 Foundation avec JavaScript. Ce livre est une excellente ressource pour apprendre à déplacer les choses, des animations simples à complexes.

où en savoir plus?

Si vous voulez apprendre, voici quelques ressources:

• Tutoriel Canvas - Un excellent tutoriel sur MDN, plein d'exemples, d'illustrations et d'explications détaillées.
• Guide des éléments de Canvas HTML5 - Un tutoriel pour débutant de six révisions.
• Tutoriels de canevas HTML5 - un ensemble complet de tutoriels créés par Eric Rowell, le créateur de la bibliothèque de toile KineticJS. Tous les exemples sont interactifs; Vous pouvez jouer avec eux et voir le résultat immédiatement.

accélérer le développement de la toile

Travailler avec l'API HTML5 «brut» HTML5 peut être un travail fastidieux. C'est pourquoi c'est une bonne idée lorsque vous apprenez bien à passer à une bonne bibliothèque en toile qui peut accélérer et faciliter le développement de votre toile.

Voici quelques choix populaires:

• kineticjs
• papier.js
• easeljs
• tissu.js
• ocanvas

Une autre façon d'accélérer votre développement de canevas HTML5 consiste à utiliser le plugin AI-> Canvas pour Adobe Illustrator. Vous pouvez trouver un aperçu du plugin dans cet article sur SitePoint.

Conclusion

c'est tout. J'espère que ce tutoriel de canevas HTML5 d'introduction vous a donné un bon point de départ pour continuer votre apprentissage et explorer cette technologie puissante.

Questions fréquemment posées (FAQ) sur la toile HTML5

Quelle est la différence entre le canevas SVG et HTML5?

SVG (Graphics vectoriels évolutifs) et les toiles HTML5 sont les deux technologies Web utilisées pour créer des graphiques. Cependant, ils diffèrent dans leur approche et leurs cas d'utilisation. SVG est une approche basée sur un vecteur où chaque forme dessinée est rappelée comme un objet. Si les attributs d'un objet sont modifiés, le navigateur peut automatiquement renforcer la scène. SVG est idéal pour les graphiques interactifs et les animations d'éléments. D'un autre côté, le canevas HTML5 est basé sur des pixels. Une fois qu'une forme est dessinée, elle est oubliée par le système. Si ses attributs changent, il doit être redessiné avec toute la scène. Cela rend la toile idéale pour les jeux ou les applications à forte intensité graphique comme les logiciels d'édition de photos.

Comment puis-je ajouter du texte à une toile?

L'ajout de texte à une toile est simple. Vous pouvez utiliser la méthode FillText (texte, x, y), où le texte est la chaîne que vous souhaitez écrire, et x et y sont les coordonnées où le texte commencera. Vous pouvez également personnaliser la police, la taille et la couleur du texte à l'aide des propriétés de police et de style de remplissage.

Puis-je utiliser HTML5 Canvas pour le développement de jeux?

Oui, HTML5 Canvas est un choix populaire pour le développement de jeu 2D. Sa nature basée sur des pixels le rend adapté à la création de jeux complexes et à forte intensité graphique qui se déroulent bien dans le navigateur. Cependant, pour les jeux 3D, WebGL, qui utilise également l'API Canvas, serait un meilleur choix en raison de ses capacités d'accélération matérielle.

Comment puis-je dessiner des formes avec une toile HTML5?

HTML5 Canvas Fournit plusieurs méthodes pour dessiner des formes. Par exemple, pour dessiner un rectangle, vous pouvez utiliser la méthode Fillrect (x, y, largeur, hauteur). Pour dessiner un cercle, vous pouvez utiliser la méthode arc (x, y, rayon, startangle, endangle). Vous pouvez également dessiner des formes complexes en utilisant des chemins.

Comment puis-je animer des objets avec une animation HTML5?

L'animation dans la toile HTML5 est obtenue en redémarrant la canevas entière à un taux élevé, généralement 60 fois par deuxième. Chaque redessine est appelée cadre et les modifications des propriétés des objets sont effectuées entre les trames pour créer l'illusion de mouvement. Cela se fait généralement à l'aide de la méthode de demandeanimationframe ().

Puis-je interagir avec des objets dessinés sur la toile?

Contrairement à SVG, la toile HTML5 ne se souvient pas des objets une fois dessinés. Cela signifie que vous ne pouvez pas leur attacher directement les gestionnaires d'événements. Cependant, vous pouvez réaliser l'interactivité en gardant une trace des propriétés des objets en JavaScript et en redessiant la toile lorsqu'une interaction se produit.

Comment puis-je enregistrer le contenu Canvas en tant qu'image?

Vous pouvez Enregistrez le contenu d'une toile en tant qu'image à l'aide de la méthode Todataurl (). Cette méthode renvoie une URL de données contenant une représentation de l'image dans le format spécifié par le paramètre de type (par défaut à PNG).

Comment puis-je effacer la toile?

Vous pouvez effacer l'ensemble Canvas utilisant la méthode ClearRect (x, y, largeur, hauteur). Pour effacer toute la toile, vous pouvez définir X et Y sur 0, ainsi que la largeur et la hauteur de la largeur et de la hauteur de la toile.

Puis-je utiliser la toile HTML5 dans tous les navigateurs?

HTML5 Canvas est pris en charge dans tous les navigateurs modernes, notamment Chrome, Firefox, Safari, Opera et Edge. Cependant, il n'est pas pris en charge dans Internet Explorer 8 ou plus tôt.

Comment puis-je gérer les erreurs dans la canevas HTML5?

La gestion des erreurs dans la canevas HTML5 est généralement effectuée à l'aide de blocs de capture d'essai en javascript. Cependant, comme Canvas est une API de bas niveau, elle ne fournit pas de messages d'erreur détaillés. Par conséquent, le débogage peut être difficile et implique souvent beaucoup d'essais et d'erreurs.

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!