Tutorial menggunakan Kanvas dalam HTML5 digabungkan dengan formula untuk melukis kemahiran tutorial zarah motion_html5

Baru-baru ini, saya ingin membuat halaman web dan meletakkan beberapa DEMO yang saya buat semasa proses pembelajaran HTML5 untuk membuat koleksi Walau bagaimanapun, adalah terlalu hodoh untuk hanya membuat halaman web dan mengatur semua DEMO oleh seorang. Saya hanya berfikir, kerana saya telah belajar kanvas, mari bermain-main dengan penyemak imbas dan membuat animasi pembukaan kecil.

Setelah berfikir tentang kesan animasi pembukaan untuk seketika, saya memutuskan untuk menggunakan zarah kerana saya fikir zarah lebih menyeronokkan. Saya masih ingat bahawa catatan blog teknikal pertama yang saya tulis adalah mengenai pembahagian teks dan gambar: Membahagikan teks dan gambar Pada masa itu, saya hanya melakukan gerakan linear, dan menambah sedikit kesan 3D. Formula senaman adalah mudah. Jadi saya hanya mahu menjadikan animasi pembukaan ini lebih dinamik.

Pergi ke DEMO dahulu: http://2.axescanvas.sinaapp.com/demoHome/index.html

Adakah kesannya lebih dinamik daripada gerakan linear? Dan ia sangat mudah, jangan lupa tajuk catatan blog ini, sedikit formula, menyeronokkan. Untuk mencapai kesan sedemikian, apa yang kita perlukan ialah sekolah menengah rendah kita. . Atau pengetahuan fizik di sekolah menengah, formula gerakan dipercepat dan gerakan nyahpecutan. Jadi ia benar-benar formula penurunan kecil. Poster asal suka bermain-main dengan beberapa perkara yang menarik Walaupun dia mungkin tidak menggunakannya di tempat kerja, keseronokan itu benar-benar menarik. Selain itu, melakukan ini juga boleh mengukuhkan kemahiran berfikir pengaturcaraan anda.

Tanpa berlengah lagi, mari kita ke topik. Biar saya terangkan secara ringkas prinsipnya~~~

Kod teras pergerakan zarah hanyalah ini:

Kod XML/HTMLSalin kandungan ke papan keratan

1. kemas kini:fungsi(masa){   
2.             ini.x  = ini.vx*masa;   
3.             this.y  = this.vy*time;   
4.     
5.             jika(!this.globleDown&&this.y>0){   
6.                 var yc = ini.mainan - ini.y;   
7.                 var xc = ini.toks - ini.x;   
8.     
9.                 ini.jl = Matematik.sqrt(xc*xc yc*yc);   
10.     
11.                 var za = 20;   
12.     
13.                 var ax = za*(xc/this.jl),   >
14.                     ay = za*(yc/this.jl),                       
15. vx = (ini.vx ax*masa)*0.97,                        
16. vy = (this.vy ay*masa)*0.97;        
17.                 
18. ini.vx = vx;                    
19. ini.vy = vy;        
20.             }lain {   
21.                 var 
22. graviti = 9.8;                    var 
23. vy = ini.vy gravity*masa;        
24.                  jika(ini.y
25. >kanvas.tinggi){                        
26. vy = -vy*0.7;                    }
28.  ini.vy = vy
29.                                                                 
},

Zarah mempunyai dua keadaan, satu jatuh bebas, dan satu lagi berada di bawah sedutan. Apatah lagi jatuh bebas. Sebelum bercakap tentang sedutan, mari siarkan sifat zarah:

Kod JavaScript

Salin kandungan ke papan keratan

1. var Titik = fungsi(x,y,vx,vy,tox,mainan,warna){
 
2. ini.x=x; 
3. ini.y=y;
 
4. ini.vx=vx; 
 
5. ini.vy=vy; 
6. ini.nextox = tox;
ini
7. .nextoy = mainan;  ini
.warna = warna;
8. ini.kelihatan =
benar
9. ini.globleDown =
salah
10. ini.setEnd(toks, mainan);
}
setTamat:
12. fungsi
(toks, mainan){
                                                                           
14.                                                                                                                                                                                                                                                                                                                                                   .y
                                                                                                                                                                                               
15. },

16. x dan y ialah kedudukan zarah, vx ialah halaju mendatar zarah, dan vy ialah halaju menegak zarah Tidak kira sama ada anda tahu nexttox atau seumpamanya, ia hanyalah pembolehubah sementara . tox, dan mainan ialah lokasi destinasi zarah.

    Pertama, berikan semua zarah destinasi, yang akan dibincangkan di bawah. Maksudnya, anda mahu zarah mencapai tempat itu, dan kemudian menentukan pembolehubah za sebagai pecutan Jika anda ingin mengetahui nilai tertentu, anda akan mendapat parameter anggaran melalui lebih banyak ujian, dan rasanya lebih kurang sama. za ialah pecutan garis antara zarah dan destinasi Oleh itu, kita boleh mengira pecutan mendatar dan pecutan menegak zarah melalui kedudukan zarah dan kedudukan destinasi melalui fungsi trigonometri mudah ini
    
    

    Kod JavaScriptSalin kandungan ke papan keratan

    1. var ax = za*(xc/ini.jl),
    2. ay = za*(yc/ini.jl),
    Selepas mempunyai pecutan mendatar dan pecutan menegak, langkah seterusnya adalah lebih mudah Kira kenaikan kelajuan mendatar dan kelajuan menegak secara langsung, dengan itu menukar nilai kelajuan mendatar dan kelajuan menegak

    
    
    .

    Kod XML/HTMLSalin kandungan ke papan keratan

    1. vx = (ini.vx ax*masa)*0.97,
    2. vy = (this.vy ay*masa)*0.97;

    Sebab mengapa ia didarabkan dengan 0.97 adalah untuk mensimulasikan kehilangan tenaga supaya zarah akan perlahan. masa ialah perbezaan masa antara setiap bingkai
    Selepas mengira halaju, hanya kemas kini kedudukan zarah.

    
    
    

    Kod XML/HTML
    Salin kandungan ke papan keratan

    ini.x = ini.vx*masa
    1. this.y = this.vy*time;

    Oleh kerana arah sambungan antara zarah dan destinasi sentiasa berubah semasa penerbangan, pecutan mendatar dan pecutan menegak zarah mesti dikira semula setiap bingkai.
    Ini adalah prinsip pergerakan, bukankah ia sangat mudah?
    Sekarang setelah kita bercakap tentang prinsip gerakan, mari kita bincangkan tentang pelaksanaan khusus animasi di atas: pemulaan animasi, lukis perkataan atau gambar yang diingini pada kanvas luar skrin, dan kemudian dapatkan piksel off- kanvas skrin melalui kaedah getImageData . Kemudian gunakan gelung untuk mencari kawasan yang dilukis dalam kanvas luar skrin Oleh kerana nilai data dalam imageData ialah tatasusunan rgba, kami menilai bahawa nilai terakhir, iaitu, ketelusan adalah lebih besar daripada 128, bermakna kawasan itu telah. dilukis. Kemudian dapatkan nilai xy kawasan Untuk mengelakkan terlalu banyak objek zarah daripada menyebabkan lag halaman, kami mengehadkan bilangan zarah Apabila mengambil piksel, nilai x dan nilai y meningkat sebanyak 2 setiap kali, dengan itu mengurangkan bilangan zarah zarah.

    
    
    

    Kod XML/HTML
    Salin kandungan ke papan keratan

    1. this.osCanvas = dokumen.createElement("canvas");   
    2.         var osCtx = ini.osCanvas.getContext("2d");   
    3.     
    4.         ini.osCanvas.width = 1000;   
    5.         ini.osCanvas.height = 150;   
    6.     
    7.         osCtx.textAlign = "center";   
    8.         osCtx.textBaseline = "tengah";   
    9.         osCtx.font="70px 微软雅黑,黑体 bold"
            
    10. osCtx.fillStyle = "#1D181F"  
            osCtx.fillText("Selamat Datang", this.osCanvas.width/2 , this.osCanvas.height/2-40);   
            osCtx.fillText("To wAxes' HOME", this.osCanvas.width/2 , this.osCanvas.height/2 40);   
            var 
    13. bigImageData = osCtx.getImageData(0,0,this.osCanivas.widosth,thivas.widosth .tinggi);   
        
            
    15. titik = [];   
        
            untuk(var 
    17. x=0;x<bigImageData.width;x =2){   
                 untuk(var 
    18. y=0;y<< 🎜>bigImageData.height;y =2){   
                    var 
    19. i = (y*bigImageData.width   x)*4;   
                    jika(bigImageData.data[i 3]
    20. >128){   
                        var 
    21. titik = baharu Titik(   >>
    22.                          Math.random()>0.5?Math.random()*20 10:Math.vas()*20 can 🎜>
                            -Math.random()*canvas.height*2,   
    24.                          0,   
    25.                          0,   
    26.                          x (canvas.width/2-this.osCanvas.width/2),   
    27.                          y (canvas.height/2-this.osCanvas.height/2),   
    28.                          "rgba(" bigImageData.data[i] "," bigImageData.data[i 1] "," bigImageData.data[i 2] ",1)"   
    29.                     );   
    30.                     dot.setEnd(canvas.width/2,canvas.height/2)   
    31.                     titik.tolak(titik);   
    32.                 }   
    33.             }   
    34.         }   

    通过循环获取到粒子的位置xy值后，把位置赋给粒子，成为粒子的目的地。一值后，把位置赋给粒子，成为粒子的目的地。倶始后出文字图片粒子化的效果了。