Définit un objet incorporé
La baalise canvas
HTML5 cours tutorialExemple : Dessiner un cercle dégradé, un triangle rouge, un rectangle multi couleur et un texte multi couleur sur le canevas :
Exemple : Copier le code
<!DOCTYPE html >
<html>
<head>
<title>HTML5 l’élément Canvas</title>
</head>
<body>
<canvas id="monCanvas" width="280" height="160"
style="border:1px solid #c3c3c3;">
Votre navigateur ne supporte pas l'élément <canvas>.
</canvas>
<script>
var c=document.getElementById("monCanvas");
var canvOK=1;
try {c.getContext("2d");}
catch (er) {canvOK=0;}
if (canvOK==1)
{
var ctx=c.getContext("2d");
ctx.beginPath(); // Filled triangle
ctx.moveTo(180,20);
ctx.lineTo(250,40);
ctx.lineTo(140,100);
ctx.fillStyle="#FF0000";
ctx.fill();
var grd=ctx.createRadialGradient(75,50,5,90,50,90);
grd.addColorStop(0,"white");
grd.addColorStop(1,"blue");
ctx.fillStyle=grd;
ctx.beginPath();
ctx.arc(75,50,40,0,2*Math.PI);
ctx.fill();
var grd2=ctx.createLinearGradient(20,90,120,90);
grd2.addColorStop(0,"black");
grd2.addColorStop("0.3","magenta");
grd2.addColorStop("0.5","blue");
grd2.addColorStop("0.6","green");
grd2.addColorStop("0.8","gold");
grd2.addColorStop(1,"red");
ctx.fillStyle=grd2;
ctx.fillRect(20,105,100,50);
ctx.font="30px Verdana";
var grd2=ctx.createLinearGradient(140,20,240,90);
grd2.addColorStop(0,"black");
grd2.addColorStop("0.2","magenta");
grd2.addColorStop("0.5","blue");
grd2.addColorStop("0.6","green");
grd2.addColorStop(1,"red");
ctx.strokeStyle=grd2;
ctx.strokeText("Un texte",140,130);
}
</script>
</body>
</html>
Qu’est ce que <canvas> ?
L’élément HTML5 <canvas> est utilisé pour dessiner des graphiques, à la volée, via un script (habituellement en JavaScript).
L'élément <canvas> est juste un container pour les graphiques. Vous devez utiliser un script pour réellement dessiner les graphiques.
L’élément <canvas> a plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, caractères et ajouter des images.
Appui de navigateur
Internet Explorer 9, Firefox, Opera, Chrome et Safari prend en charge l'élément <canvas>.
Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas l'élément <canvas>.
Comment créer une zone de dessin en HTML5
Un canvas est une zone rectangulaire sur une page HTML, et il est spécifié avec l'élément <canvas>.
Remarque : Par défaut, l'élément <canvas> n’a aucune bordure et aucun contenu.
Le balisage ressemble à ceci :
<canvas id="monCanvas" width="200" height="100"></canvas>
C’est une balise double
Remarque : Toujours spécifier un attribut id (pour désigner un script) et un attribut width et height pour définir la taille du Canvas.
Astuce : Vous pouvez avoir plusieurs éléments <canvas> dans une page HTML.
Pour ajouter une bordure, utilisez l'attribut de style :
Exemple
Exemple : Copier le code
<canvas id="monCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Dessiner sur le canevas avec JavaScript
Tout le dessin sur le Canvas doit se faire à l'intérieur d'un script JavaScript :
Exemple
Exemple : Copier le code
<script type="text/javascript">
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Explication de l’exemple :
Tout d'abord, trouvez l'élément <canvas> :
Exemple : Copier le code
var c=document.getElementById("monCanvas")
Ensuite, appelez la méthode getContext() (vous devez passer la chaîne « 2d » à la méthode getContext()) :
Exemple : Copier le code
var ctx=c.getContext("2d")
L'objet getContext("2d") est un objet intégré de HTML5, avec de nombreuses propriétés et méthodes permettant de dessiner des tracés, boîtes, cercles, textes, images et plus encore.
Les deux lignes suivantes dessinent un rectangle rouge :
Exemple : Copier le code
ctx.fillStyle="#0000 FF "
ctx.fillRect(0,0,150,75)
La propriété fillStyle peut être une couleur CSS, un dégradé ou un motif. La valeur par défaut fillStyle est #000000 (noir).
La méthode fillRect (x, y, largeur, hauteur) dessine un rectangle rempli avec le style de remplissage actuel.
Coordonnées du canvas
Le canvas est une grille à deux dimensions.
Le coin supérieur gauche du canvas a les coordonnées (0,0)
Par conséquent, la méthode fillRect() ci-dessus avait les paramètres (0,0,150,75).
Cela signifie : commencer au coin supérieur gauche (0,0) et dessiner un rectangle de 150 x 75 pixels.
Canvas - chemins
Pour dessiner des lignes droites sur un canvas, nous allons utiliser les deux méthodes suivantes :
moveTo (x, y) définit le point de départ de la ligne
lineTo (x, y) définit le point d'arrivée de la ligne
Afin de réellement tracer la ligne, nous devons utiliser une des méthodes "ink", comme stroke().
Exemple
Définir un point de départ en position (0,0) et un point d'arrivée en position (200 100). Utilisez ensuite la méthode stroke() pour réellement tracer la ligne :
JavaScript :
Exemple : Copier le code
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
Exemple : utilisation de l’élément canvas pour tracer un diagramme
Code HTML
Exemple : Copier le code
<!DOCTYPE html >
<html>
<head>
<title>HTML5 l’élément Canvas</title>
</head>
<body>
<canvas id="monCanvas" width="180" height="130"
style="border:1px solid #c3c3c3;">
Votre navigateur ne supporte pas l'élément <canvas>.
</canvas>
<script type="application/x-javascript">
var ctx =
document.getElementById('monCanvas').getContext('2d');
var img = new Image();
img.src = 'http://www.oujood.com/html5/images/repere.png';
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
</script>
</body>
</html>
Pour dessiner un cercle sur un canvas, nous allons utiliser la méthode suivante :
arc(x,y,r,Start,stop)
Pour réellement dessiner le cercle, nous devons utiliser une des méthodes "ink", comme stroke() ou fill().
Exemple
Créer un cercle avec la méthode arc() :
JavaScript :
Exemple : Copier le code
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas – dessiner un texte sur l’élément canvas
Pour dessiner du texte sur un canvas, la propriété et les méthodes les plus importantes sont :
font - définit les propriétés de police pour le texte
fillText (texte, x, y) - tirages "rempli" texte sur le Canvas
strokeText (texte, x, y) - dessine du texte sur le Canvas (sans remplissage)
À l'aide de fillText() :
Exemple
Écrire un texte rempli de 30px de taille et la police « Arial » à l'aide de fillText() sur le Canvas:
JavaScript :
Exemple : Copier le code
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
À l'aide de strokeText() :
Exemple Écrire un texte de 30px de taille et la police « Arial » sans remplissage à l'aide de strokeText() sur le Canvas:
JavaScript :
Exemple : Copier le code
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Canva - Les dégradés
Les dégradés peuvent servir pour remplir des rectangles, cercles, lignes, texte, etc..
Les Formes sur le Canvas ne se limitent pas aux couleurs unies.
Il existe deux différents types de dégradés :
createLinearGradient (x, y, x 1, y1) - crée un dégradé linéaire
createRadialGradient (x, y, r, x 1, y1, r1) - crée un dégradé radial/circulaire
Dès que nous aurons un objet dégradé, nous devons ajouter deux ou plusieurs taquets de couleur.
La méthode addColorStop() spécifie la couleur s'arrête et sa position le long du gradient. Postes dégradés peuvent se situer entre 0 à 1.
Pour utiliser le dégradé, définissez la propriété fillStyle ou strokeStyle sur le gradient et puis dessiner la forme, tels que du texte, un rectangle ou une ligne.
À l'aide de createLinearGradient() :
Exemple
Créer un dégradé linéaire. Remplir le rectangle avec le dégradé :
JavaScript :
Exemple : Copier le code
var c=document.getElementById("monCanvas");
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);
À l'aide de createRadialGradient() :
Exemple
Créer un dégradé radial ou circulaire. Remplir le rectangle avec le dégradé :
JavaScript :
Exemple : Copier le code
var c=document.getElementById("monCanvas");
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);
Canvas - Images
Pour dessiner une image sur le Canvas, nous allons utiliser la méthode suivante :
drawImage (image, x, y)
Image à utiliser :
Exemple
Dessinez l'image sur le Canvas :
Code html :
Exemple : Copier le code
<!DOCTYPE html >
<html>
<head>
<title>HTML5 l’élément Canvas</title>
</head>
<body>
<canvas id="monCanvas" width="260" height="160"
style="border:1px solid #c3c3c3;">
Votre navigateur ne supporte pas l'élément <canvas>.
</canvas>
<script>
var ctx = document.getElementById('monCanvas').getContext('2d');
var img = new Image();
img.src = 'http://www.oujood.com/html5/images/image007.jpg';
img.onload = function(){
ctx.drawImage(img,0,0);
};
</script>
</body>
</html>
Référence HTML Canvas
Pour une référence complète de toutes les propriétés et méthodes qui peuvent être utilisées avec l'objet Canvas (avec des exemples d'essai sur chaque propriété et méthode), allez à notre canvas référence.
Le <canvas> Tag HTML
|
Balise |
Description |
|---|---|
|
Utilisé pour dessiner des graphiques, via un script (habituellement en JavaScript) |