Le code HTML <canvas> élément 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 HTML Canvas ?
Le code HTML <canvas> élément est utilisé pour dessiner des graphiques, à la volée, via un script (usually JavaScript) .
La <canvas> élément est seulement un conteneur pour les graphiques. Vous devez utiliser un script pour dessiner réellement les graphiques.
Canvas a plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, du texte, et l' ajout d' images.
L'élément de toile fait partie de HTML5 et permet dynamique, rendu scriptable des formes 2D et des images bitmap. Il est un faible niveau, le modèle de procédure qui met à jour une image bitmap et ne dispose pas d'un graphe de scène intégré.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la <canvas> élément.
| Élément | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Histoire
Toile a d'abord été introduit par Apple pour une utilisation à l'intérieur de leur propre composant WebKit Mac OS X en 2004, les applications Powering comme les widgets Dashboard et le navigateur Safari.
Plus tard, en 2005, il a été adopté dans la version 1.8 des navigateurs Gecko et Opera en 2006, et étalonnés par le Groupe de travail sur la technologie Web Hypertext Application (WHATWG) sur les nouvelles spécifications proposées pour les technologies web de prochaine génération.
Usage
Toile se compose d'une région étirable définie dans le code HTML avec la hauteur et la largeur des attributs. code JavaScript peut accéder au secteur grâce à un ensemble complet de fonctions de dessin similaires à celles des autres API 2D communs, permettant ainsi des graphiques générés dynamiquement.
Certaines utilisations prévues de toile comprennent des graphiques de construction, des animations, des jeux, et la composition d'image.
Canvas Exemples
Une canvas est une zone rectangulaire sur une page HTML. Par défaut, une canvas n'a pas de frontière et aucun contenu.
Le balisage ressemble à ceci:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Toujours spécifier un attribut id (to be referred to in a script) , et un attribut largeur et la hauteur pour définir la taille de la canvas .
Pour ajouter une bordure, utilisez le style de l' attribut:
Basic Canvas Exemple
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> Essayez vous - même » Dessin avec JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); Essayez vous - même » Tracer une ligne
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Essayez vous - même » Dessiner un cercle
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Essayez vous - même » Dessiner un texte
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Essayez vous - même » Texte Stroke
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Essayez vous - même » Dessiner dégradé linéaire
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); Essayez vous - même » Dessin circulaire gradient
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); Essayez vous - même » dessiner l'image
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); Essayez vous - même » HTML Canvas Tutorial
Pour tout savoir sur HTML <canvas> , Visitez notre plein HTML Canvas Tutorial .