HTML 5 Canvas
L'élément canvas est utilisé pour dessiner des graphiques sur des pages Web.
Qu'est-ce que Canvas ?
L'élément canevas de HTML5 utilise JavaScript pour dessiner des images sur une 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 HTML5.
Spécifiez l'identifiant, la largeur et la hauteur de l'élément :
<canvas id="myCanvas" width="200" height="100"></canvas>
Dessinez via JavaScript
L'élément canevas lui-même n'a aucune capacité de dessin. Tous les travaux de dessin doivent être effectués 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") L'objet est un HTML5 intégré. objet doté de plusieurs façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images.
Les deux lignes de code suivantes dessinent un rectangle rouge :
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); La méthode 🎜>
fillStyle le teint en rouge et la méthode fillRect spécifie la forme, la position et la taille.
La méthode fillRect ci-dessus a des paramètres (0,0,150,75).
Moyens : Dessinez un rectangle de 150x75 sur la toile, en partant du coin supérieur gauche (0,0).
Comme indiqué ci-dessous, les coordonnées X et Y de la toile sont utilisées pour positionner le tableau sur la toile.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</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 style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html> Exemple - Cercle Tracez un cercle en précisant la taille, la couleur et la position :
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#00ff00";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>élément de toile :
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>Exemple - Dégradé
Dessinez un arrière-plan dégradé en utilisant la couleur que vous spécifiez :
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body>
</html>Exemple - Image
Placez une image dans Sur la toile :
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="http://image75.360doc.com/DownloadImg/2014/06/1301/42548176_7.jpg"
cxt.drawImage(img,0,0);
</script>
</body>
</html>