HTML Graphiques Canvas
L'élément HTML <canvas> est utilisé pour dessiner des graphiques sur une page web.
Le graphique à 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 HTML Canvas ?
L'élément HTML <canvas> est utilisé pour dessiner des graphiques dynamiquement via JavaScript.
L'élément <canvas> est uniquement un conteneur pour les graphiques. Vous devez utiliser JavaScript pour réellement dessiner les graphiques.
Le canvas dispose de plusieurs méthodes pour dessiner des chemins, des rectangles, des cercles, du texte et ajouter des images.
Le canvas est pris en charge par tous les principaux navigateurs.
Exemples de Canvas
Un canvas est une zone rectangulaire sur une page HTML. Par défaut, un canvas n'a pas de bordure et pas de 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), ainsi que les attributs width et height pour définir la taille du canvas. Pour ajouter une bordure, utilisez l'attribut style .
Voici un exemple d'un canvas de base, vide :
Exemple
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> Ajouter un JavaScript
Après avoir créé la zone de canvas rectangulaire, vous devez ajouter un JavaScript pour effectuer le dessin.
Voici quelques exemples :
Dessiner 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 contour
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");
// Créer un dégradé
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Remplir avec le dégradé
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");
// Créer un dégradé
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Remplir avec le dégradé
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script> Dessiner une image
Exemple
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script> Tutoriel HTML Canvas
Pour en savoir plus sur <canvas> , veuillez consulter notre Tutoriel HTML Canvas .