HTML5 comprend un élément passionnant appelé CANVAS. Il a beaucoup d'utilisations, mais pour l'utiliser, vous devez apprendre un peu de JavaScript, HTML, et parfois CSS.
Cela rend l'élément CANVAS un peu intimidant pour de nombreux concepteurs, et en fait, la plupart ignoreront probablement l'élément jusqu'à ce qu'il existe des outils fiables pour créer des animations et des jeux CANVAS sans le savoir JavaScript.
À quoi sert le canevas HTML5
L'élément HTML5 CANVAS peut être utilisé pour beaucoup de choses qu'auparavant, vous deviez utiliser une application intégrée comme Flash pour générer:
- Graphiques dynamiques
- Jeux en ligne et hors ligne
- Animations
- Vidéo et audio interactifs
En fait, la principale raison pour laquelle les gens utilisent l'élément CANVAS est la facilité avec laquelle il est possible de transformer une page Web simple. en une application Web dynamique, puis convertissez cette application en une application mobile à utiliser sur les smartphones et comprimés.
Si nous avons Flash, pourquoi avons-nous besoin de Canvas?
Selon le Spécification HTML5, l'élément CANVAS est: «... un canevas bitmap dépendant de la résolution, qui peut être utilisé pour le rendu de graphiques, de graphiques de jeu, d'art ou d'autres images visuelles à la volée. »
L'élément CANVAS vous permet de dessiner des graphiques, des graphiques, des jeux, des illustrations et d'autres éléments visuels directement sur la page Web en temps réel.
Vous pensez peut-être que nous pouvons déjà le faire avec Flash, mais il existe deux différences majeures entre CANVAS et Flash:
- L'élément CANVAS est intégré directement dans le code HTML. Les scripts qui l'utilisent sont soit dans le HTML, soit dans un fichier externe lié. Cela signifie que l'élément CANVAS fait partie du modèle objet de document (DOM).
- Flash est un fichier externe intégré. Il utilise soit l'élément EMBED soit l'élément OBJECT pour l'affichage et ne peut pas interagir directement avec les autres éléments HTML. Étant donné que l'élément CANVAS fait partie du DOM, il peut interagir avec le DOM de plusieurs manières.
- Par exemple, vous pouvez créer une animation qui change lorsqu'une autre partie de la page interagit, comme un élément de formulaire en cours de remplissage. Avec Flash, le mieux que vous puissiez faire serait de lancer le Film éclair ou une animation, mais avec CANVAS, vous pouvez créer de nombreux effets différents, même en ajoutant le texte du champ de formulaire dans l'animation.
- L'élément CANVAS est pris en charge de manière native par les navigateurs Web. Pour que les utilisateurs puissent réellement utiliser Flash, leur navigateur doit avoir le plugin installé. C'est souvent un problème pour la plupart des gens en raison d'installations Flash obsolètes ou du fait que leur système d'exploitation ne le prend tout simplement pas en charge.
- Auparavant, chaque navigateur avait le plugin installé, mais ce n'est plus le cas, et beaucoup suppriment même le plugin en raison de difficultés. De plus, il n'est même pas disponible sur le populaire Plateforme iOS.
Canvas est utile même si vous n'avez jamais prévu d'utiliser Flash
L'une des principales raisons pour lesquelles l'élément CANVAS est si déroutant est que de nombreux concepteurs se sont habitués à un site Web complètement statique. Les images peuvent être animées, mais c'est fait avec GIF, et bien sûr, vous pouvez intégrer une vidéo dans des pages, mais encore une fois, il s'agit d'une vidéo statique qui se trouve simplement sur la page et démarre ou s'arrête peut-être en raison de l'interaction, mais c'est tout.
L'élément CANVAS vous permet d'ajouter beaucoup plus d'interactivité à vos pages Web, car vous pouvez désormais contrôler les graphiques, les images et le texte de manière dynamique avec un langage de script. L'élément CANVAS vous aide à transformer des images, des photos, des tableaux et des graphiques en éléments animés.
Quand envisager d'utiliser l'élément Canvas
Votre public doit être votre première considération lorsque vous décidez d'utiliser ou non l'élément CANVAS.
Si votre public utilise principalement Windows XP et IE 6, 7 ou 8, créer une fonctionnalité de canevas dynamique sera inutile car ces navigateurs ne la prennent pas en charge.
Si vous créez une application qui ne sera utilisée que sur des machines Windows, alors Flash pourrait être votre meilleur choix. Une application destinée à être utilisée sur des ordinateurs Windows et Mac pourrait bénéficier d'une application Silverlight.
Cependant, si votre application doit être visualisée sur des appareils mobiles (Android et iOS) ainsi que sur des appareils modernes ordinateurs de bureau (mis à jour avec les dernières versions du navigateur), alors l'utilisation de l'élément CANVAS est un bon choix.
Gardez à l'esprit que l'utilisation de cet élément vous permet d'avoir des options de secours comme des images statiques pour les navigateurs plus anciens qui ne le prennent pas en charge.
Cependant, il n'est pas recommandé d'utiliser le canevas HTML5 pour tout. Tu devrais jamais utilisez-le pour des choses comme votre logo, votre titre ou votre navigation (bien que l'utiliser pour animer une partie de l'un d'entre eux serait bien).
Selon les spécifications, vous devez utiliser les éléments les plus adaptés à ce que vous essayez de construire. L'utilisation de l'élément HEADER avec des images et du texte est donc préférable à l'élément CANVAS pour votre en-tête et votre logo.
De plus, si vous créez un page Web ou une application destinée à être utilisée dans un support non interactif comme l'impression, vous devez savoir que l'élément CANVAS qui a été mis à jour dynamiquement peut ne pas s'imprimer comme prévu. Vous pouvez obtenir une impression du contenu actuel ou du contenu de secours.