HTML Canvas – Guide Complet

HTML Canvas – Présentation

HTML5 a révolutionné le monde du codage HTML par les nouveaux avantages intéressants qu’il a apporté. Canvas est un nouvel élément faisant partie de la spécification WhatWG Web applications 1.0 connue sous le nom de HTML5.Il nous permet de produire des graphiques à l’aide des scripts tel que le javascript, comme par exemple dessiner des graphiques, réaliser des compositions de photographies ou des animations simples ( pas si simple quand même 🙂 ).

Canvas doit sa naissance a Apple dans le “Dashboard Mac Ord dS X”, et a été  intégré peu après dans le navigateur Safari, pour être supporter ensuite par les navigateurs basés sur Gecko  1.8, comme Firefox 1.5.

HTML Canvas – Quelle Utilité?

Les Canvas HTML peuvent dessiner des textes colorés, avec ou sans animation. Ils ont de supers fonctionnalités pour les présentations des données graphiques et des diagrammes. Les objets Canvas peuvent être animés, tout est possible: depuis les simples boules rebondissantes jusqu’aux dessins des animations les plus complexes. Les Canvas peuvent répondre aux événements JavaScript, ils sont réactifs à toute action de l’utilisateur (clics, clics de souris, clics de boutons, mouvement des doigts). Les Canvas peuvent être utilisé dans les applications des jeux, en effet, leurs méthodes pour les animations, offrent beaucoup de possibilités pour les développeurs des applications des jeux.

En HTML, un élément <canvas> ressemble à ceci:

L’attribut largeur (width) et hauteur (height) est nécessaire pour définir la taille du canevas.

Dans cet article, nous allons essayer de décrire la manière dont l’élément <canvas> est utilisé dans nos propres pages HTML. Les exemples fournis devraient vous donner une idée assez claire de ce qu’il est possible de faire avec <canvas> et peuvent être utilisés pour commencer à créer  vos propres réalisations.

Vous pouvez avoir plusieurs éléments <canvas> sur une même page HTML.

Par défaut, l’élément <canvas> n’a ni bordure, ni contenu (l’élément <canvas> n’est qu’un conteneur pour les graphiques. Vous devez utiliser un script pour dessiner les graphiques)

Pour ajouter une bordure, utilisez l’attribut style comme l’exemple dessous:

See the Pen RZvmed by Med Mus (@MedMus) on CodePen.

HTML Canvas – Dessin

Dessiner avec JavaScript

Tous les dessins doivent être faits avec le Javascript

See the Pen Draw on the Canvas With JavaScript by Med Mus (@MedMus) on CodePen.

Étape 1: Trouvez l’élément <Canvas>

Tout d’abord, vous devez trouver l’élément <canvas>. Cela se fait en utilisant la méthode HTML DOM getElementById():

Étape 2: Créer l’objet de dessin

Deuxièmement, vous avez besoin d’un objet de dessin pour le canevas. getContext () est un objet HTML intégré, avec les propriétés et les méthodes de dessin:

Étape 3: Dessinez dans le canevas

Enfin, vous pouvez dessiner sur le canevas.

Définissez le style de remplissage de l’objet de dessin sur la couleur rouge:

ctx.fillStyle = “#FF0000”;

Tracer une ligne

Pour dessiner une ligne droite sur un canevas, utilisez les méthodes suivantes:

• moveTo (x, y) – définit le point de départ de la ligne
• lineTo (x, y) – définit le point final de la ligne

Pour dessiner la ligne, vous devez utiliser l’une des méthodes “ink”, comme stroke ().

See the Pen Tracer une ligne by Med Mus (@MedMus) on CodePen.

Dessiner un cercle

Pour dessiner un cercle sur un canevas, utilisez les méthodes suivantes:

• beginPath () – commencer un chemin
• arc(x,y,r,startangle,endangle) – créer un arc / courbe. Pour créer un cercle avec arc (): Il faut Définir l’angle de départ sur 0 et l’angle de fin vers 2 * Math.PI. Les paramètres x et y définissent les coordonnées x et y du centre du cercle. Le paramètre r définit le rayon du cercle.

See the Pen Dessiner un cercle by Med Mus (@MedMus) on CodePen.

HTML Canvas – Dégradés

Les dégradés peuvent être utilisés pour remplir les rectangles, les cercles, les lignes, le texte, etc. Les formes sur les Canvas ne se limitent pas aux couleurs solides. Il existe deux types différents de gradients:

• createLinearGradient (x, y, x1, y1) – crée un dégradé linéaire
• createRadialGradient (x, y, r, x1, y1, r1) – crée un gradient radial / circulaire

Une fois que nous avons un objet dégradé, nous devons y ajouter deux ou plusieurs couleurs.

La méthode addColorStop () spécifie la couleur et sa position le long du dégradé. Les positions de gradient peuvent être comprises entre 0 et 1.

Pour utiliser le dégradé, définissez la propriété fillStyle ou strokeStyle sur le dégradé, puis dessinez la forme (rectangle, texte ou ligne).

Le dégradé createLinearGradient ()

Exemple

Créez un dégradé linéaire. Remplir le rectangle avec le dégradé:

See the Pen Le dégradé createLinearGradient by Med Mus (@MedMus) on CodePen.

Le dégradé createRadialGradient():

Exemple

Créez un gradient radial / circulaire. Remplir le rectangle avec le dégradé:

See the Pen Le dégradé createRadialGradient by Med Mus (@MedMus) on CodePen.

HTML Canvas – Texte

Pour écrire un texte sur un canvas, la propriété et les méthodes les plus importantes sont:

• font – définit les propriétés de la police pour le texte
• fillText (texte, x, y) – dessine le texte “rempli” sur le canvas
• strokeText (texte, x, y) – dessine le texte sur le Canvas (pas de remplissage)

Utilisation de fillText ()

Exemple

Définir la police sur 30px “Arial” et écrir un texte rempli sur le canevas:

See the Pen Utilisation de fillText by Med Mus (@MedMus) on CodePen.

Utilisation de strokeText ()

Exemple

Définir la police sur 30px “Arial” et écrir un texte, sans remplissage, sur le canvas:

See the Pen Utilisation de strokeText by Med Mus (@MedMus) on CodePen.

HTML Canvas – Images

Pour dessiner une image sur un canevas, utilisez la méthode suivante:

• drawImage(image,x,y)

Exemple

See the Pen HTML Canvas – Images by Med Mus (@MedMus) on CodePen.

HTML Canvas – Référence

Description

La balise HTML5 <canvas> est utilisé pour dessiner des graphiques, via des scripts (généralement JavaScript). Cependant, l’élément <canvas> n’a pas de capacités de dessin (Ce n’est qu’un conteneur pour les graphiques) – vous devez utiliser un script pour dessiner les graphiques.

La méthode getContext () renvoie un objet qui fournit les méthodes et les propriétés pour le dessin sur le canevas.

Cette référence couvrira les propriétés et les méthodes de l’objet getContext (“2d”), qui peuvent être utilisé pour dessiner du texte, des lignes, des boîtes, des cercles et plus encore – sur le canevas.

Compatibilité des navigateurs

Les chiffres dans le tableau spécifient la première version du navigateur qui prend pleinement en charge l’élément <canvas>.

Internet Explorer 9, Firefox, Opera, Chrome et Safari supportent <canvas> et ses propriétés et méthodes.

Remarque: Internet Explorer 8 et versions antérieures, ne prennent pas en charge l’élément <canvas>.

Couleurs, Styles et Ombres

Styles de ligne

Rectangles

Chemins

Transformations

Texte

Dessin d’image

Manipulation des pixels

Composition

Autre

Enfin j’espère que ce guide vous serez utile et vous apporte une valeur ajoutée à vos connaissance en matière de programmation et développement des sites. N’hésitez surout pas à me laisser un commentaire si vous avez des questions ou vous voulez faire des suggéstions. Merci pour la lecture et au prochain article 🙂