CSS3 implementiert das Zeichnen von Bildern auf Leinwand (Codebeispiel)

Dieser Artikel führt Sie in die Methode zum Zeichnen von Bildern auf der Leinwand ein, die für die Verwendung auf PCs und mobilen Endgeräten geeignet ist. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Zeichnen Sie ein Bild auf die Leinwand

<canvas id="myCanvas" width="1000px" height="200px" >您的浏览器不支持canvas标签。</canvas>

rrree

Wenn Sie mehrere verschiedene Bilder auf die Leinwand legen möchten, müssen Sie bei mehreren Bildern das Objekt mehrmals deklarieren und den Pfad mehrmals abrufen Malen Sie mehrmals auf die Leinwand.

Das Folgende sind 6 Bilder, die ich auf die Leinwand gezeichnet habe,

var canvas = document.getElementById("myCanvas");
//获取画笔
var ctx=canvas.getContext('2d');
//声明Image对象
var img=new Image();
//获取img路径
img.src="img/num.png";
//把图片画到画布上
img.onload=function(){
	ctx.drawImage(img,57,0,57,64);
}

rrree

Rendering:

Jetzt möchte ich die Leinwand machen Bilder, die ich zeichne, können sowohl an PCs als auch an mobile Endgeräte angepasst werden. Jetzt muss ich nur noch den Code ändern, um die Bilder auf der Leinwand zu zeichnen Sicherlich habe ich es erst nach einiger Recherche herausgefunden. Wenn nicht, müssen Sie die Seite jedes Mal manuell aktualisieren, wenn Sie zwischen PC und Mobilgerät wechseln. Die Funktion kann zwar weiterhin implementiert werden, das Benutzererlebnis ist jedoch nicht sehr gut.

Beachten Sie unbedingt, dass Sie bei einer Änderung der Seitengröße zuerst die Leinwand freimachen müssen, da es sonst zu überlappenden Leinwänden unterschiedlicher Seitengrößen kommt

Ich unterscheide nur kurz zwischen dem mobilen Endgerät und dem PC-Terminal. Wenn es auf Mobilgeräten mit unterschiedlichen Bildschirmgrößen adaptiv ist, sind weitere if(){}else{}-Beurteilungen erforderlich.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter

CSS3-Video-Tutorial

, Html5-Video-Tutorial ! Verwandte Empfehlungen:

PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung

CSS3 Online-Handbuch

Div/CSS-Grafik-Tutorial

HTML5-Grafik-Tutorial

HTML5-Online-Handbuch

HTML5-Codesammlung für Spezialeffekte

Das obige ist der detaillierte Inhalt vonCSS3 implementiert das Zeichnen von Bildern auf Leinwand (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!