HTML5 CANVAS - GUIDE COMPLET

Table Des Matières

HTML Canvas – Présentation


HTML5 Canvas
Jean d’Arc a créé cette démo de plan de texture 3D à l’aide de l’élément HTML5 Canvas. La démo comporte des objets en 3D tournants avec un plan de texture sphérique et un ombre de pixels. Source: creativefan

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é?


HTML5 Canvas - Particules liquides
Liquid Particles :Daniel Puhe has created this interesting liquid motion particle demo. There are two flavours: the traditional dots and letters.  Source: creativefan

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:

<canvas id= »myCanvas » width= »200″ height= »100″></canvas>

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():

var canvas = document.getElementById(« myCanvas »);

É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:

var ctx = canvas.getContext(« 2d »);

É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 »;

La propriété fillStyle peut être une couleur CSS, un dégradé ou un modèle. Le fillStyle par défaut est noir.

La méthode fillRect (x, y, largeur, hauteur) dessine un rectangle, rempli avec le style de remplissage (fill style), dans le canevas:

ctx.fillRect(0,0,150,75);

HTML Canvas – Coordonnées


Canvas – Coordonnées

Le Canvas HTML est une grille bidimensionnelle. Le coin supérieur gauche du Canvas a les coordonnées (0,0). Dans la section précédente, vous avez vu cette méthode utilisée: fillRect (0,0,150,75). Cela veut dire: Commencez par le coin supérieur gauche (0,0) et dessinez un rectangle de 150×75 pixels.

Exemple de coordonnées

Passez la souris sur le rectangle ci-dessous pour voir ses coordonnées x et y:

See the Pen Canvas Mouse Coordinates by Med Mus (@MedMus) on CodePen.

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>.Canvas Compatibilité des Navigateurs

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

Propriété Description
fillStyle Définit ou renvoie la couleur, le dégradé ou le modèle utilisé pour remplir le dessin
strokeStyle Définit ou renvoie la couleur, le dégradé ou le modèle utilisé pour les traits
shadowColor Définit ou renvoie la couleur à utiliser pour les ombres
shadowBlur Définit ou renvoie le niveau de flou pour les ombres
shadowOffsetX Définit ou renvoie la distance horizontale de l’ombre de la forme
shadowOffsetY Définit ou renvoie la distance verticale de l’ombre de la forme

 

Méthode Description
createLinearGradient() Crée un dégradé linéaire (à utiliser sur le contenu de canevas)
createPattern() Répétez un élément spécifié dans la direction spécifiée
createRadialGradient() Crée un dégradé radial / circulaire (à utiliser sur le contenu de canvas)
addColorStop() Spécifie les couleurs et les positions d’arrêt dans un objet dégradé

 

Styles de ligne

Propriété Description
lineCap Définit ou renvoie le style les caps d’extrémité pour une ligne
lineJoin Définit ou renvoie le type de coin créé, lorsque deux lignes se rencontrent
lineWidth Définit ou renvoie la largeur de ligne actuelle
miterLimit Définit ou renvoie la longueur maximale d’onglet

 

Rectangles

Méthode Description
rect() Crée un rectangle
fillRect() Dessine un rectangle « rempli »
strokeRect() Dessine un rectangle (sans remplissage)
clearRect() Efface les pixels spécifiés dans un rectangle donné

 

Chemins

Méhode Description
fill() Remplit le dessin actuel (chemin)
stroke() Dessine le chemin que vous avez défini
beginPath() Débute un chemin ou réinitialise le chemin actuel
moveTo() Déplace le chemin vers le point spécifié dans le canevas, sans Créer de ligne
closePath() Crée un chemin du point actuel vers le point de départ
lineTo() Ajoute un nouveau point et crée une ligne vers ce point à partir du dernier point spécifié dans le canevas
clip() Rogne une région de toute forme et taille à partir du canevas d’origine
quadraticCurveTo() une région de toute forme et taille à partir du canevas d’origine
bezierCurveTo() Crée une courbe cubique Bézier
arc() Crée un arc / courbe (utilisé pour créer des cercles ou des parties de cercles)
arcTo() Crée un arc / courbe entre deux tangentes
isPointInPath() Renvoie true (vrai) si le point spécifié se trouve dans le chemin actuel, sinon false (faux)

 

Transformations

Méthode Description
scale() Ajuste le dessin actuel plus grand ou plus petit
rotate() Tourne le dessin actuel
translate() Remplace la position (0,0) sur le canevas
transform() Remplace la matrice de transformation actuelle pour le dessin
setTransform() Réinitialise la transformation actuelle de la matrice d’identité. Ensuite, exécute la transformation ()

 

Texte

Propriété Description
font Définit ou renvoie les propriétés de police en cours pour le contenu du texte
textAlign Définit ou renvoie l’alignement actuel pour le contenu du texte
textBaseline Définit ou renvoie la ligne de base du texte actuelle utilisée lors du dessin du texte

 

Méthode Description
fillText() Dessine le texte «rempli» sur le canevas
strokeText() Dessine le texte sur la canvas (sans remplissage)
measureText() Renvoie un objet contenant la largeur du texte spécifié

Dessin d’image

Méthode Description
drawImage() Dessine une image, une toile ou une vidéo sur le canevas

Manipulation des pixels

Propiété Description
width Renvoie la largeur d’un objet ImageData
height Renvoie la hauteur d’un objet ImageData
data Renvoie un objet contenant des données d’image d’un objet ImageData spécifié

 

Méthode Description
createImageData() Crée un nouvel objet ImageData vierge
getImageData() Renvoie un objet ImageData qui copie les données de pixel pour le rectangle spécifié sur le canevas
putImageData() Transforme les données d’image (d’un objet ImageData spécifié) sur le canevas

Composition

Propriété Description
globalAlpha Définit ou renvoie la valeur alpha ou de transparence actuelle du dessin
globalCompositeOperation Définit ou renvoie comment une nouvelle image est dessinée sur une image existante

Autre

Method Description
save() Enregistre l’état du contexte actuel
restore() Renvoie l’état et les attributs du chemin enregistré précédemment
createEvent()
getContext()
toDataURL()

 

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 🙂

3 Commentaires

  1. Comment enregistrez-vous l’image du canvas SVP?
    Sans clic, sans souris droite, sans « enregistrez sous ». Directement par javascript une fois que le canvas est rempli.
    De façon que l’image du canvas puisse être reprise et utilisée par un autre script.
    Donc que l’image du canvas soit sauvegardée dans un fichier image.

    • Nous pourrions toujours ouvrir notre canevas dans un nouvel onglet (ou fenêtre) du navigateur avec la méthode JavaScript toDataURL. window.location.href = canvas.toDataURL (« image / png »); Malheureusement, cela nécessite que l’utilisateur utilise le menu Fichier ou le bouton droit de la souris pour enregistrer l’image à partir de l’onglet du navigateur récemment ouvert.

  2. En effet, en intervenant on arrive à enregistrer l’image du canvas.
    Mais sans intervenir, n’y a-t-il pas une solution?
    En javascript si possible ou éventuellement grâce à un autre code?
    Et sans enregistrer la page entière. Juste le canvas et ce qu’il y a dedans sous forme d’image?

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here