suchen

Heim >Web-Frontend >H5-Tutorial >Canvas-Element in HTML5

Canvas-Element in HTML5

黄舟
黄舟Original
2016-12-22 15:27:151412Durchsuche

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>

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>

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

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

Erstellen Sie dann das Kontextobjekt: 

var cxt=c.getContext("2d");
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>
Das Obige ist HTML5 Der Inhalt des Canvas-Elements in . Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!



Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Formularelemente in HTML5Nächster Artikel：Formularelemente in HTML5

In Verbindung stehende Artikel

Mehr sehen