Explication détaillée de l'utilisation spécifique de la balise en html5

L'élément

est conçu pour les formes graphiques vectorielles côté client. Il n'a pas de comportement propre, mais expose une API de dessin au client JavaScript afin que le script puisse dessiner ce qu'il veut sur un canevas.

canvas est une balise nouvellement définie en HTML5. Comme son nom l'indique, il s'agit d'une balise canvas en soi et n'a pas de comportement propre. Il s'agit simplement d'un conteneur graphique et un script doit être utilisé pour cela. dessiner des graphiques. Voici un exemple de son utilisation :

<canvas id="canvas" width="200" height="300">  
Your browser does not support HTML5 Canvas.  
</canvas>

Comme le montre le code ci-dessus, la balise canvas a trois attributs : id, width, height Parmi eux, la valeur id est définie pour être utilisée. dans le code JavaScript Référencez la balise canvas pour dessiner en utilisant canvas comme interface. width et height définissent respectivement la largeur et la hauteur du canevas. L'unité par défaut est le pixel. L'unité px ne peut pas être ajoutée après le nombre.

La balise canvas n'est pas supportée par tous les navigateurs, nous devons donc placer un morceau de texte entre les balises de début et de fin du canevas. Lorsque le navigateur ne prend pas en charge la balise canvas, ce texte sera affiché. dans la balise canvas est situé pour rappeler aux lecteurs que la balise canvas ne fonctionne pas avec ce navigateur. En javascript, vous devez également déterminer si le navigateur supporte cette balise :

var canvas=document.getElementById("canvas")  
if(!canvas.getContext)  
{  
alert("Your browser does not support HTML5 Canvas.")  
}  
else  
{  
//do something here  
}

Vous pouvez utiliser un élément canvas pour afficher un rectangle rouge :

<canvas id="Canvas"></canvas>  
<script type="text/Javascript">  
var canvas=document.getElementById(&#39;Canvas&#39;);  
var ctx=canvas.getContext(&#39;2d&#39;);  
ctx.fillStyle=&#39;#FF0000&#39;;  
ctx.fillRect(0,0,80,100);  
</script>

Comme dans l'exemple ci-dessus, il n'y a pas d'API de dessin. Elle est définie sur l'élément canevas lui-même, mais sur un objet d'environnement de dessin obtenu via la méthode getContext() du canevas. L'API Canvas utilise également la représentation du chemin. Cependant, un chemin est défini par une série d'appels de méthodes, telles que les méthodes beginPath() et arc(), plutôt que d'être décrit comme une chaîne de lettres et de chiffres. Une fois le chemin défini, d'autres méthodes telles que fill() opèrent sur ce chemin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!