Beispiele zur Erläuterung der Verwendung der HTML5-Canvas-API zum Betrieb von Grafiken. Rotation_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Beispiele zur Erläuterung der Verwendung der HTML5-Canvas-API zum Betrieb von Grafiken. Rotation_HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:45:24

Original

1939 Leute haben es durchsucht

Als Webentwickler arbeite ich mit dem HTML5-Canvas-Element. Das Rendern von Bildern ist ein großer Zweig, der sehr wichtig ist und häufig verwendet wird. Daher geht es im heutigen Tutorial um die Anzeige von Leinwandbildern und darum, wie man Bilder dreht.

Im Allgemeinen gibt es zwei Möglichkeiten, die Leinwand zu drehen: Mittendrehung und Referenzpunktdrehung. Die kompetente Anwendung der Rotationsfunktion wird bei Ihren Entwicklungsarbeiten von großem Nutzen sein.

Über die Mittelpunktsdrehung des Objekts
Bei der ersten Art der Drehung wollen wir uns mit der Drehung eines Objekts um seinen Mittelpunkt befassen. Wird mithilfe des Canvas-Elements implementiert, das die einfachste Art der Drehung darstellt. Als Material für unser Experiment verwendeten wir das Bild eines Gorillas.
Die Grundidee besteht darin, dass wir die Leinwand um einen Mittelpunkt drehen, die Leinwand drehen und sie dann in ihre ursprüngliche Position zurückbringen müssen. Wenn Sie Erfahrung mit Grafik-Engines haben, dürfte Ihnen das bekannt vorkommen. Der Code sieht wahrscheinlich so aus: (Klicken Sie, um den Effekt zu sehen)

JavaScript-CodeInhalt in die Zwischenablage kopieren

Funktion onload() {
var canvas = document.getElementById('c1');
var ctx1 = canvas.getContext('2d');
var image1 = new Image();
function() {
// regelmäßige Rotation um die Mitte
var xpos = canvas.width/2
var ypos = canvas.height/2
ctx1.save();
ctx1.translate(xpos, ypos);
ctx1.rotate(47 * Math.PI / 180);
ctx1.translate(-xpos, -ypos);
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
'image.png'
}

Die Kommentare sind bereits sehr ausführlich, aber eines möchte ich noch erwähnen: .save() und .restore(). Ihr Zweck besteht darin, die Leinwand so zu speichern, wie sie vor der Drehung war, und sie nach der Drehung wiederherzustellen. Es ist sehr wichtig, Konflikte mit anderen Renderings effektiv zu vermeiden. Viele Freunde konnten vor allem aus diesem Grund nicht reibungslos rotieren.

Um einen bestimmten Punkt drehen
Der zweite Typ besteht darin, das Bild um einen bestimmten Punkt im Raum zu drehen, was komplizierter wird. Aber warum tun Sie das? In vielen Fällen müssen Sie ein Objekt in Bezug auf ein anderes Objekt drehen, und eine einzelne Drehung um den Mittelpunkt kann die Anforderungen nicht erfüllen. Letzteres wird beispielsweise häufiger in Webspielen verwendet.

JavaScript-CodeInhalt in die Zwischenablage kopieren
1. Funktion onload() {
2. var canvas2 = document.getElementById('c2');
3. var ctx2 = canvas2.getContext('2d');
4. // regelmäßige Rotation um den Punkt
5. var image2 = neu Image();
6. image2.onload = Funktion() {
7. // regelmäßige Rotation um einen Punkt
8. var angle = 120 * Math.PI / 180; // Drehwinkel in Bogenmaß
9. var rx = 300, ry = 200; // die Rotation x und y
10. var px = 300, py = 50; // die Objekte zentrieren x und y
11. var radius = ry - py; // die Differenz der y-Positionen oder der Radius
12. var dx = rx radius * Math.sin(angle); // die Auslosung x
13. var dy = ry - radius * Math.cos(angle); // die Ziehung y
14. ctx2.drawImage(image2, 300 - image2.width / 2, 50 - image2.height / 2);
15. ctx2.beginPath();
16. ctx2.arc(300,200,5,0,Math.PI*2,false);
17. ctx2.closePath();
18. ctx2.fillStyle = 'rgba(0,255,0,0.25)';
19. ctx2.fill();
21. ctx2.save();
22. ctx2.translate(dx, dy);
23. ctx2.rotate(angle);
24. ctx2.translate(-dx, -dy);
25. ctx2.drawImage(image2, dx - image2.width / 2, dy - image2.height / 2);
26. ctx2.restore();
27. }
28. image2.src = 'smallimage.png';
29. }
Der Code ist einfach und seine Funktion besteht darin, ein Bild entsprechend einem Punkt um 120 Grad zu drehen, wodurch das Bild lebendiger wird.

Ein magisches Logo zeichnen
Dies ist ein Logo, das ich auf Du Niang gesehen habe. Ich habe ein sehr einfaches Rechteck verwendet und es durch Rotationstransformation in ein sehr schönes Logo umgewandelt. . Ist dieses Logo nicht sehr magisch? Kinderschuhe nutzen ihr Gehirn und versuchen es zu erkennen. Geben Sie unten den Code an, den ich zur Implementierung verwendet habe.
JavaScript-CodeInhalt in die Zwischenablage kopieren
2. "zh">
4. "UTF-8">
5. 绘制魔性Logo
9. "canvas-warp">
11. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
<script> </li> <li class="alt"> window.onload = Funktion(){ </li> <li> var canvas = document.getElementById("canvas"); </li> <li class="alt"> canvas.width = 800; </li> <li> canvas.height = 600; </li> <li class="alt"> var context = canvas.getContext("2d"); </li> <li> context.fillStyle = "#FFF"; </li> <li class="alt"> context.fillRect(0,0,800,600); </li> <li> </li> <li class="alt"> for(var i=1; i<=10; i ){ </li> <li> context.save(); </li> <li class="alt"> context.translate(400,300); </li> <li> context.rotate(36 * i * Math.PI / 180); </li> <li class="alt"> context.fillStyle = "rgba(255,0,0,0.25)"; </li> <li> context.fillRect(0, -200, 200, 200); </li> <li class="alt"> context.restore(); </li> <li> } </li> <li class="alt"> }; </li> <li></script>