HTML Canvas Graphiques
L'élément HTML <canvas> est utilisé pour dessiner des graphiques sur une page Web.
Le graphique de gauche est créé avec <canvas>. Il montre quatre éléments : un rectangle rouge, un rectangle dégradé, un rectangle multicolore et un texte multicolore.
Qu'est-ce que le canevas HTML ?
L'élément HTML <canvas> permet de dessiner des graphiques, à la volée, via JavaScript.
L'élément <canvas> est uniquement un conteneur pour les graphiques. Vous devez utiliser JavaScript pour dessiner les graphiques.
Canvas propose plusieurs méthodes pour dessiner des chemins, des zones, des cercles, du texte et ajouter des images.
Prise en charge du navigateur
Les numéros dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément <canvas>.
| Élément | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Exemples de canevas
Un canevas est une zone rectangulaire sur une page HTML. Par défaut, un canevas n'a ni bordure ni contenu.
Le balisage ressemble à ceci :
<canvas id="myCanvas" width="200" height="100"></canvas>
Remarque : Spécifiez toujours un attribut id (à référencer dans un script) et une width et l'attribut height pour définir la taille du canevas. Pour ajouter une bordure, utilisez l'attribut style.
Voici un exemple de canevas basique et vide :
Exemple
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</canvas>
Try it Yourself »
Ajouter JavaScript
Après avoir créé la zone de canevas rectangulaire, vous devez ajouter un code JavaScript pour réaliser le dessin.
Voici quelques exemples :
Tracer une ligne
Exemple
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Try it Yourself »
Dessine un cercle
Exemple
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Try it Yourself »
Dessiner un texte
Exemple
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Try it Yourself »
Texte de trait
Exemple
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Try it Yourself »
Dessiner un dégradé linéaire
Exemple
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Créer un dégradé
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Remplir de dégradé
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Try it Yourself »
Dessiner un dégradé circulaire
Exemple
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Créer un dégradé
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Remplir de dégradé
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Try it Yourself »
Dessiner une image
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
Try it Yourself »
HTML Canvas Tutoriel
Pour en savoir plus sur <canvas>, veuillez lire notre Tutoriel HTML Canvas.
