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

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

1. Funktion onload() {
2. var canvas = document.getElementById('c1');
3. var ctx1 = canvas.getContext('2d');
4. var image1 = new Image();
image1.onload =
5. function() {
 
6. // regelmäßige Rotation um die Mitte  
7. var xpos = canvas.width/2
8. var ypos = canvas.height/2
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
9. ctx1.save();
10. ctx1.translate(xpos, ypos);
11. ctx1.rotate(47 * Math.PI / 180);
//Um 47 Grad drehen
12. ctx1.translate(-xpos, -ypos);
13. ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
ctx1.restore();
}
image1.src =
16. 'image.png'
;
17. } 

    

    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();   
    20.          
    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

    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.        
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        

      
18.   
19. <script>   </span></li> <li class="alt"> <span>    window.onload = </span><span class="keyword">Funktion</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"><span>        canvas.width = 800;   </span></li> <li><span>        canvas.height = 600;   </span></li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"><span>        context.fillRect(0,0,800,600);   </span></li> <li><span>  </span></li> <li class="alt"> <span>        </span><span class="keyword">for</span><span>(</span><span class="keyword">var</span><span> i=1; i<=10; i ){   </span></li> <li><span>            context.save();   </span></li> <li class="alt"><span>            context.translate(400,300);   </span></li> <li><span>            context.rotate(36 * i * Math.PI / 180);   </span></li> <li class="alt"><span>            context.fillStyle = </span><span class="string">"rgba(255,0,0,0.25)"</span><span>;   </span></li> <li><span>            context.fillRect(0, -200, 200, 200);   </span></li> <li class="alt"><span>            context.restore();   </span></li> <li><span>        }   </span></li> <li class="alt"><span>    };   </span></li> <li><span></script>   
20.   
21.   

运行结果：

是不是非常的酷？这个图形稍微分析一下发现还是蛮简单的,就是让一个正放形，以屏幕中点（即初始正方形左下角顶点）为圆心进行旋转.

艺术是不是很美妙？大家一定以及体会到了Canvas的奇妙，简简单单的几行代码就能实现无穷无尽的效果。只要脑洞够大，没有什么是不可以实现的。所以，扬起咱们的艺术家的旗帜，加快步伐，继续前进！