Maison >interface Web >Tutoriel H5 >Élément canevas en HTML5

Élément canevas en HTML5

黄舟original: 2016-12-22 15:27:151421parcourir

L'élément

canvas est utilisé pour dessiner des graphiques sur des pages Web.

Qu'est-ce que Canvas ?

L'élément canevas de HTML 5 utilise JavaScript pour dessiner des images sur la page Web.

La toile est une zone rectangulaire dont vous pouvez contrôler chaque pixel.

Canvas propose de nombreuses façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images.

Créer un élément Canvas

Ajouter un élément Canvas à la page HTML 5, spécifier l'identifiant, la largeur et la hauteur de l'élément :

<canvas id="myCanvas" width="200" height="100"></canvas>

Dessin via JavaScript L'élément

canvas lui-même n'a aucune capacité de dessin. Tout le travail de dessin doit être effectué dans JavaScript :

<script type="text/javascript"> 
var c=document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
cxt.fillStyle="#FF0000"; 
cxt.fillRect(0,0,150,75); 
</script>

JavaScript utilise l'identifiant pour trouver l'élément canevas :

var c=document.getElementById("myCanvas");

Ensuite, créez l'objet contextuel :

var cxt=c.getContext("2d");

getContext("2d") est un objet HTML 5 intégré avec plusieurs méthodes pour dessiner des chemins, des rectangles, des cercles, des caractères et ajouter des images.

Exemple : Passez la souris sur le rectangle pour voir les coordonnées. Essayez-le vous-même. Le code est le suivant :

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
	margin: 0px;
	font-size: 70%;
	font-family: verdana, helvetica, arial, sans-serif;
}
#coordiv {
	float: left;
	width: 199px;
	height: 99px;
	border: 1px solid #c3c3c3
}
</style>
<script type="text/javascript">  
function cnvs_getCoordinates(e) { 
	x=e.clientX; 
	y=e.clientY; 
	document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; 
} 
function cnvs_clearCoordinates() { 
	document.getElementById("xycoordinates").innerHTML=""; 
} 
</script>
</head>
<body>
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<div id="xycoordinates"></div>
</body>
</html>

Ce qui précède est. HTML5 Le contenu de l'élément Canvas dans , veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Éléments de formulaire en HTML5Article suivant：Éléments de formulaire en HTML5

Articles Liés

Voir plus