suchen

Heim >Web-Frontend >H5-Tutorial >So zeichnen Sie Bilder mit HTML5 und JS auf Leinwand

So zeichnen Sie Bilder mit HTML5 und JS auf Leinwand

不言
不言Original
2018-06-22 15:27:432377Durchsuche

In diesem Artikel wird hauptsächlich die Methode zum Zeichnen von Bildern auf Leinwand mit js+html5 vorgestellt, einschließlich verwandter Techniken zur Bedienung von HTML5-Elementen.

Dieser Artikel beschreibt das Beispiel zum Zeichnen von Bildern auf Leinwand mit js+html5-Methode. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt: 

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="img_flwr.png";
</script>
</body>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels Jedermanns Studie. Weitere verwandte Inhalte Bitte beachten Sie die chinesische PHP-Website!

Verwandte Empfehlungen:

Verwenden Sie SurfaceView, um Regen- und Schneeanimationseffekte zu erzielen

Informationen zur HTML5 Canvas-Ereignisverarbeitung

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Bilder mit HTML5 und JS auf Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html5 JS 事件 canvas
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：Analyse von Strings, Pfaden, Hintergründen und Bildern basierend auf HTML5 CanvasNächster Artikel：Analyse von Strings, Pfaden, Hintergründen und Bildern basierend auf HTML5 Canvas

In Verbindung stehende Artikel

Mehr sehen