Graphiques de canevas HTML
L'élément HTML <canvas>est utilisé pour dessiner des graphiques sur une page Web.
Le graphique de gauche est créé avec <canvas>. Il affiche quatre éléments : un rectangle rouge, un rectangle dégradé, un rectangle multicolore et un texte multicolore.
Qu'est-ce qu'un canevas HTML ?
L'élément HTML <canvas>est utilisé pour dessiner des graphiques, à la volée, via JavaScript.
L' <canvas>élément n'est qu'un conteneur pour les graphiques. Vous devez utiliser JavaScript pour réellement dessiner les graphiques.
Canvas propose plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, du texte et ajouter des images.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'
<canvas>élément.
| Element | |||||
|---|---|---|---|---|---|
| <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 idattribut (à référencer dans un script) et un attribut widthet heightpour définir la taille du canevas. Pour ajouter une bordure, utilisez l' styleattribut.
Voici un exemple de canevas vide de base :
Exemple
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Ajouter un JavaScript
Après avoir créé la zone de canevas rectangulaire, vous devez ajouter un JavaScript pour faire 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>
Dessiner 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>
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>
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>
Dessiner un dégradé linéaire
Exemple
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Dessiner un dégradé circulaire
Exemple
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
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>
Tutoriel de canevas HTML
Pour en savoir plus sur <canvas>, veuillez lire notre didacticiel HTML Canvas .