Canvas-Element in HTML5-H5-Tutorial-php.cn

Canvas-Element in HTML5

黄舟

Freigeben： 2016-12-22 15:27:15

Original

1388 Leute haben es durchsucht

Das

canvas-Element wird zum Zeichnen von Grafiken auf Webseiten verwendet.

Was ist Canvas?

Das Canvas-Element von HTML 5 verwendet JavaScript, um Bilder auf der Webseite zu zeichnen.

Die Leinwand ist ein rechteckiger Bereich, in dem Sie jedes Pixel steuern können.

Canvas bietet viele Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern.

Canvas-Element erstellen

Canvas-Element zur HTML 5-Seite hinzufügen, ID, Breite und Höhe des Elements angeben:

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

Nach dem Login kopieren

Zeichnen mit JavaScript Das

canvas-Element selbst verfügt über keine Zeichenfunktionen. Alle Zeichenarbeiten müssen in JavaScript durchgeführt werden:

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

Nach dem Login kopieren

JavaScript verwendet die ID, um das Canvas-Element zu finden:

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

Nach dem Login kopieren

Erstellen Sie dann das Kontextobjekt:

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

Nach dem Login kopieren

<🎜 Das >getContext("2d")-Objekt ist ein integriertes HTML 5-Objekt mit mehreren Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Zeichen und zum Hinzufügen von Bildern.

Beispiel: Bewegen Sie die Maus über das Rechteck, um die Koordinaten anzuzeigen. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Das Obige ist HTML5 Der Inhalt des Canvas-Elements in . Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!