Contoh untuk menerangkan cara menggunakan API Kanvas HTML5 untuk mengendalikan kemahiran tutorial rotation_html5 grafik

Sebagai pembangun web, saya telah bekerja dengan elemen kanvas HTML5. Memaparkan imej adalah cabang besar yang sangat penting dan biasa digunakan Oleh itu, tutorial hari ini adalah mengenai paparan imej kanvas dan cara memutar imej Mungkin ia adalah perkara yang baik yang anda mahukan sekarang.

Secara umumnya, terdapat dua cara untuk memutarkan kanvas: putaran tengah dan putaran titik rujukan. Penggunaan mahir fungsi putaran akan sangat membantu kerja pembangunan anda.

Mengenai putaran tengah objek
Jenis putaran pertama, kita ingin melihat memutar objek mengenai pusatnya. Dilaksanakan menggunakan elemen kanvas, yang merupakan jenis putaran yang paling mudah. Kami menggunakan gambar gorila sebagai bahan untuk eksperimen kami.
Idea asasnya ialah kita perlu memutarkan kanvas di sekeliling titik tengah, memutarkan kanvas, dan kemudian mengembalikan kanvas ke kedudukan asalnya. Jika anda mempunyai sedikit pengalaman dengan enjin grafik, maka ini sepatutnya terdengar biasa. Kodnya mungkin seperti ini: (Klik untuk melihat kesannya)

Kod JavaScriptSalin kandungan ke papan keratan

1. fungsi onload() {
2. var kanvas = document.getElementById('c1');
3. var ctx1 = canvas.getContext('2d');
var
4. imej1 = baharu Imej(); imej1.onload = fungsi
() {
5.  // putaran biasa mengenai pusat
 
6. var
xpos = canvas.width/2;
7. var ypos = canvas.height/2;
ctx1.drawImage(imej1, xpos - imej1.lebar / 2, ypos - imej1.tinggi / 2);
8. ctx1.save(); ctx1.translate(xpos, ypos);
ctx1.rotate(47 * Math.PI / 180);
9. //Putar 47 darjah
ctx1.translate(-xpos, -ypos);
11. ctx1.drawImage(imej1, xpos - imej1.lebar / 2, ypos - imej1.tinggi / 2);
ctx1.restore();
12. }
imej1.src =
13. 'imej.png'
;
14. } 

15. 

    Komen sudah sangat terperinci, tetapi saya masih ingin menyebut satu perkara: .save() dan .restore(). Tujuan mereka adalah untuk menyelamatkan kanvas seperti sebelum putaran dan kemudian memulihkannya selepas putaran. Adalah sangat penting untuk mengelakkan konflik dengan rendering lain dengan berkesan Ramai rakan tidak dapat berputar dengan lancar, kebanyakannya disebabkan oleh sebab ini.

    Putar di sekitar titik tertentu
    Jenis kedua ialah untuk memutar imej di sekitar titik tertentu dalam ruang, yang akan menjadi lebih rumit. Tetapi mengapa melakukan ini? Dalam banyak kes, anda perlu memutarkan objek dengan merujuk kepada objek lain, dan satu putaran di sekeliling pusat tidak dapat memenuhi keperluan. Dan yang terakhir lebih biasa digunakan Sebagai contoh, dalam permainan web, putaran sering digunakan.

    
    Kod JavaScriptSalin kandungan ke papan keratan

    1. fungsi onload() {   
    2.     var canvas2 = document.getElementById('c2');   
    3.     var ctx2 = canvas2.getContext('2d');   
    4.     // putaran biasa tentang titik   
    5.     var imej2 = baharu Imej();   
    6.     image2.onload = fungsi() {   
    7.       // putaran biasa tentang satu titik   
    8.       var sudut = 120 * Math.PI / 180; // sudut putaran dalam radian   
    9.       var rx = 300, ry = 200; // putaran x dan y   
    10.       var px = 300, py = 50; // objek berpusat x dan y   
    11.       var jejari = ry - py; // perbezaan dalam kedudukan y atau jejari   
    12.       var dx = rx   jejari * Math.sin(sudut); // cabutan x    
    13.       var dy = ry - radius * Math.cos(angle); // cabutan y   
    14.       ctx2.drawImage(imej2, 300 - imej2.lebar / 2, 50 - imej2.tinggi / 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(sudut);   
    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.   }  

    

    Kod ini mudah, dan fungsinya adalah untuk memutar gambar 120 darjah mengikut titik, menjadikan gambar lebih jelas.

    Melukis logo ajaib
    Ini adalah logo yang saya lihat di Du Niang. Saya bijak menggunakan penjelmaan putaran. . Bukankah logo ini sangat ajaib? Kasut kanak-kanak menggunakan otak mereka dan cuba menyedarinya. Di bawah, berikan kod yang saya gunakan untuk melaksanakannya.

    Kod JavaScriptSalin kandungan ke papan keratan

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

      
16.   
17.   
18.     window.onload = fungsi(){   
19.         var kanvas = document.getElementById("kanvas");   
20.         canvas.width = 800;   
21.         canvas.height = 600;   
22.         var context = canvas.getContext("2d");   
23.         context.fillStyle = "#FFF";   
24.         context.fillRect(0,0,800,600);   
25.   
26.         untuk(var i=1; i<=10; i ){   
27.             context.save();   
28.             context.translate(400,300);   
29.             context.rotate(36 * i * Math.PI / 180);   
30.             context.fillStyle = "rgba(255,0,0,0.25)";   
31.             context.fillRect(0, -200, 200, 200);   
32.             context.restore();   
33.         }   
34.     };   
35.   
36.   
37.   

运行结果：

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

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