Élément canevas en HTML5-Tutoriel H5-php.cn

Élément canevas en HTML5

黄舟

Libérer： 2016-12-22 15:27:15

original

1414 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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

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

Copier après la connexion

Ensuite, créez l'objet contextuel :

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

Copier après la connexion

<🎜 L'objet >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>

Copier après la connexion

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 !