Indique si les marqueurs list-item doit apparaitre à l'intérieur ou en dehors du flux du contenu
Les exemples fournis devrait vous donner quelques idées claires de ce que vous pouvez faire avec l'élément <canvas> de html5
Ce tutorial décrit comment mettre en œuvre l'élément <canvas>
dans vos pages HTML
Les exemples fournis devrait vous donner quelques idées claires de ce que vous pouvez faire avec <canvas> et peuvent être utilisée pour commencer à construire vos propres implémentations.
L'élément <canvas> est utilisé pour dessiner des graphiques, à la volée, sur une page web.
Commençons par jeter un coup d'œil sur cet exemple pour avoir une aidé sur ce que nous réserve l’élément canvas.
<!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>
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.
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>.
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 :
<canvas id="monCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Tout le dessin sur le Canvas doit se faire à l'intérieur d'un script JavaScript :
<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> :
Sélectionner le code
var c=document.getElementById("monCanvas")
Ensuite, appelez la méthode getContext() (vous devez passer la chaîne « 2d » à la méthode getContext()) :
Sélectionner 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 :
Sélectionner 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.
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().
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 :
Sélectionner le code
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
Code HTML
<!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().
Créer un cercle avec la méthode arc() :
JavaScript :
Sélectionner 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();
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)
Exemple
Écrire un texte rempli de 30px de taille et la police « Arial » à l'aide de fillText() sur le Canvas:
JavaScript :
Sélectionner le code
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
JavaScript :
Sélectionner le code
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
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 :
Sélectionner 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() :
Créer un dégradé radial ou circulaire. Remplir le rectangle avec le dégradé :
JavaScript :
Sélectionner 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);
Pour dessiner une image sur le Canvas, nous allons utiliser la méthode suivante :
drawImage (image, x, y)
Image à utiliser :
Exemple
Code html :
Sélectionner 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>
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) |
SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent