Tutorial membuat jam digital dengan petua tutorial HTML5_html5

Ia adalah jam digital ini, saya fikir ia adalah idea yang bagus pada masa itu, tetapi saya tidak peduli dengannya. Sehingga semalam, rakan sekerja saya melihat kes ini di Internet Dia fikir ia sangat keren, lalu dia datang dan bertanya kepada saya bagaimana ia dilaksanakan ia. Perbezaannya ialah Cen An menggunakan div untuk membuatnya. Dan saya melakukannya menggunakan kanvas. Adalah lebih baik untuk menggunakan kanvas untuk prestasi, kerana hanya untuk mengawal pergerakan setiap titik, menggunakan js untuk mengawal atribut gaya dom pasti kurang dalam prestasi berbanding menggunakan js untuk mengawal lukisan kanvas.

Mari kita lihat DEMO yang saya buat dahulu, dan kemudian terangkan secara ringkas kaedah melakukan ini: Sila cucuk saya untuk melihat DEMO.

Idea untuk melakukan ini adalah sangat mudah, iaitu untuk menyimpan kedudukan setiap nombor melalui rentetan:
Salin kod

Kod XML/HTMLSalin kandungan ke papan keratan

1. var numData = [
2. "1111/1001/1001/1001/1001/1001/1111", //0
3. "0001/0001/0001/0001/0001/0001/0001", //1
4. "1111/0001/0001/1111/1000/1000/1111", //2
5. "1111/0001/0001/1111/0001/0001/1111", //3
6. "1010/1010/1010/1111/0010/0010/0010", //4
7. "1111/1000/1000/1111/0001/0001/1111", //5
8. "1111/1000/1000/1111/1001/1001/1111", //6
9. "1111/0001/0001/0001/0001/0001/0001", //7
10. "1111/1001/1001/1111/1001/1001/1111", //8
11. "1111/1001/1001/1111/0001/0001/1111", //9
12. "0000/0000/0010/0000/0010/0000/0000", //:
13. ]

0 bermaksud tiada piksel, 1 bermakna ada piksel, / adalah untuk penampilan yang lebih baik, ia adalah cawangan Secara ringkasnya: sebagai contoh, 0 ialah:

　

Kod XML/HTMLSalin kandungan ke papan keratan

1. 1 1 1 1
3. 1 0 0 1
5. 1 0 0 1
7. 1 0 0 1
9. 1 0 0 1
11. 1 0 0 1
13. 1 1 1 1

Itu sepatutnya menjadikannya sangat jelas. Terdapat juga : nombor dari 0 hingga 9, yang diwakili oleh rentetan.

Kemudian tulis objek zarah, iaitu piksel:

Kod XML/HTMLSalin kandungan ke papan keratan

1. var P_radius = 8,Graviti = 9.8;   
2.         var Zarah = fungsi(){   
3.              ini.x = 0;   
4.              ini.y = 0;   
5.              ini.vx = 0;   
6.              ini.vy = 0;   
7.              warna ini = "";   
8.              ini.kelihatan = salah;   
9.              ini.jatuhkan = salah;   
10.         }   
11.         Partikel.prototaip = {   
12.             pembina:Zarah,   
13.             paint:function(){        //绘制自身   
14.                 ctx.fillStyle = ini.warna;   
15.                 ctx.beginPath();   
16.                 ctx.arc(this.x,this.y,P_radius,0,2*Math.PI);   
17.                 ctx.fill();   
18.             },   
19.             set semula:fungsi(x,y,warna){        //重置   
20.                 ini.x = x;   
21.                 ini.y = y;   
22.                 ini.vx = 0;   
23.                 ini.vy = 0;   
24.                 warna ini = warna;   
25.                 ini.kelihatan = benar;   
26.                 this.drop = false;   
27.             },   
28.             isDrop:function(){        //落下   
29.                 this.drop = benar;   
30.                 var vx = Matematik.random()*20 15>  
                
31. ini.vx = Matematik.rawak() =0.5?-vx : vx;   
32.             },   
33.             kemas kini:fungsi(masa){        //每一帧的动作   
34.                  jika (this.drop){   
35.                     ini.x  = ini.vx*masa;   
36.                     ini.y  = ini.vy*masa;   
37.   
38.                     var vy = ini.vy Graviti*masa;   
39.   
40.                     jika(ini.y>=canvas.height-P_radius){   
41.                          ini.y = kanvas.tinggi  >.tinggi  >
42.                          vy = -vy*0.7;   
43.                     }   
44.   
45.                     ini.vy = vy;   
46.   
47.                     jika(ini.x-P_radius||ini.x&g 🎜>kanvas.lebar P_radius||ini.y-P_radius||ini.y>kanvas.tinggi P_radius){   
                         
48. ini.kelihatan = salah;   
                    }   
                }   
            }   
        }　　   
  

粒子对象的属性比较简单，就位置，速度，以及是否可视化。方法的趯，paint是位置，速度，以及是否可视化。方法的趯，paint是是是繘度为粒子要循环利用的，提升性能），isDrop是粒子落下方法，kemas kini就是每一帧更新粒子的动作，update中当粒子运动超出kanvas的绘制区域时，就把它的就把它的就把它的就把它的可置它的启置它器中保存起来等待下一次调用。

　　写好粒子对象后，就要考虑如何让粒子按照位置画上去，同时当粒虑如何让粒子按照位置画上去，同时当粒空子他做自由落体的动画了。

　　先画背景（也就是那没有像素的白点）：

Kod XML/HTML

复制内容到剪贴板

1. fungsi drawBg(){   
2.             var tx = (kanvas.width-((P_radius*2 X_J)*4*8 7*xjg))/2;   
3.              untuk(var i=0;i 🎜>8;i ){   
4.                 var ty = (canvas.height-((P_radius yjg)*6))/2;   
5.                  untuk(var j=0;jnumData[0].panjang;j ){   
6.                     var tt = numData[0].charAt(j);   
7.                     jika(tt==="/"){   
8.                          ty =yjg;   
9.                     }lain {   
10.                          var x = tx j%5*(P_J🎜),* (X_🎜) >                             
11. y = ty;                             
12. bgctx.fillStyle = "#FFF";                            bgctx.beginPath();   
13.                         bgctx.arc(x,y,P_radius,0,2*Math.PI);   
14.                         bgctx.fill();   
15.                     }   
16.                 }   
17.                 tx =xjg 4*(P_radius*2 X_J);   
18.             }   
19.         }   

Mula-mula lukis latar belakang ke dalam kanvas luar skrin dan cachekannya Kemudian tidak perlu pengiraan logik apabila melukis semula setiap bingkai. Hanya lukis kanvas luar skrin secara terus. Logik di atas seharusnya tidak sukar untuk difahami Ia adalah untuk menggelung melalui 8 nombor melalui dua gelung, dan kemudian melukis setiap titik nombor dengan titik Apabila "/" ditemui, ia bermakna garis baru diperlukan, dan ty yang dilukis Tambahkan selang baris baharu, tetapkan semula tx, dan kemudian lukis. Sama seperti itu, semua titik boleh dilukis. Paparannya adalah seperti berikut:


Selepas latar belakang dilukis, mulakan lukis piksel digital mengikut setiap saat masa. Kaedah utamanya ialah:


Kod XML/HTMLSalin kandungan ke papan keratan
1. fungsi setMasa(masa){   
2.              var h = masa.getHours() "",   
3.                 m = masa.getMinutes() "",   
                s = masa.getSeconds() "";   
4.             hh = h.panjang===1?"0" h:h;   
5.             mm = m.panjang===1?"0" m:m;   
6.             ss = s.panjang===1?"0" s:s;   
7.   
8.              var kini = h ":" m ":" s;   
9.              var tx = (kanvas.width-((P_radius*2 X_J)*4*8 7*xjg))/2,warna = "";   
10.              untuk(var i=0;i 🎜>nowdate.length;i ){   
11.                 var n = kini.charAt(i)===":"?10:par nowdate.charAt(i)),   
12.                     teks = numData[n];   
13.   
14.                 var ty = (canvas.height-((P_radius yjg)*6))/2;   
15.   
16.                 suis(i){   
17.                     kes 0:warna = "#4DCB74";pecah;   
18.                     kes 2:warna = "#4062E0";pecah;   
19.                     kes 3:warna = "#D65050";pecah;   
20.                     kes 5:warna = "#4062E0";pecah;   
21.                     kes 6:warna = "#797C17";pecah;   
22.                 }   
23.   
24.                  untuk(var j=0;jteks.panjang;j ){   
25.                     var tt = teks.charAt(j);   
26.                     jika(tt==="/"){   
27.                          ty =yjg;   
28.                     }lain{   
29.                          var x = tx j%5*(P_J🎜),* (X_🎜) >                             
30. y = ty,   ,                                
31. pp = null,   >,   >                             
32. berguna = null;                            zarah.untukSetiap(fungsi(p){   
33.                             jika(p.boleh dilihat&
34. p.x===x&p.yp.y🎜 >
                                 
35. ppp = p;   
                            }lain jika(!p.visible&berguna===null){   
36.                                 berguna = p;   
37.                             }   
38.                         });   
39.                          jika(pp!==null&tt==="0"){   
40.                             pp.isDrop();   
41.                         } lain jika(pp===null&tt= =="🎜{>= =="1") >
42.                             usefullp.reset(x , y , color);   
43.                         }   
44.                     }   
45.                 }   
46.                 tx =xjg 4*(P_radius*2 X_J);   
47.             }   
48.         }  
　　原理也不难，也是跟上面画背景差不多，遍历所有点，然后涹据当面华无符串来判断，当前点是否应该有像素，如果有像素就再判断当前这个点是否已经有粒子对象在了，如果已经有粒子对象在了，就直接跳出不处理，如果年理，如果年家粒子容器中找一个没有被使用的粒子reset到这个位置。还有一种情况，就是当前这个点是不应该有像素的，但是却有粒子，那就获取这个粒子，让这个粒佔子。

　　时间设置也写好了，就可以写舞台更新的代码了：




Kod XML/HTML

复制内容到剪贴板

1. var timeCount_0 = 0,timeCount_1 = 0 ,zarah = [];   
2.         fungsi initAnimate(){   
3.              untuk(var i=0;i 🎜>200;i ){   
4.                 var p = baharu Zarah();   
5.                 zarah.push(p);   
6.             }   
7.   
8.              timeCount_0 = baharu Tarikh();   
9.              timeCount_1 = baharu Tarikh();   
10.             drawBg();   
11.             setTime(timeCount_0)   
12.             bernyawa();   
13.         }   
14.   
15.         fungsi menghidupkan(){   
16.              ctx.clearRect(0,0,canvas.width,canvas.height);   
17.             ctx.drawImage(bgcanvas,0,0);   
18.   
19.              var timeCount_2 = baharu Tarikh();   
20.   
21.              if(timeCount_1-timeCount_0>=1000){   
22.                 setTime(timeCount_1);   
23.                 timeCount_0 = timeCount_1;   
24.             }   
25.   
26.             zarah.forEach(fungsi(p){   
27.                 jika(p.boleh dilihat){   
28.                     p.kemas kini((timeCount_2-timeCount_1)/70);   
29.                     p.paint();   
30.                 }   
31.             });
33.  timeCount_1 = timeCount_2
35. RAF(bernyawa)
36.                                                                                 

Lakukan pengamulaan animasi dalam initAnimate bermaksud membuat seketika dua ratus objek zarah dan meletakkannya dalam bekas zarah untuk menyimpannya, kemudian kemas kini cap masa, cache latar belakang, tetapkan masa semasa, dan kemudian panggil badan gelung animasi untuk memulakan animasi.

Logik dalam animasi juga sangat mudah. ​​Dapatkan cap masa Jika perbezaan masa antara dua cap waktu lebih besar daripada atau sama dengan 1 saat, setTime dilakukan. Langkah seterusnya ialah melintasi dan melukis semula semua zarah yang divisualisasikan dalam bekas zarah.

Kemudian selesai:



Masih terdapat banyak kawasan yang boleh dioptimumkan untuk kesan ini, kerana jam dan minit bergerak agak jarang, jadi kedua-dua ini boleh di-cache, dan apabila tiada tindakan, hanya lukis data cache secara langsung Ini boleh mengurangkan bilangan panggilan API lukisan untuk setiap bingkai pentas, yang pasti akan meningkatkan prestasi. Walau bagaimanapun, tidak terdapat banyak zarah sekarang, dan dua hingga tiga ratus objek zarah sudah mencukupi Jika pengoptimuman tidak dilakukan, animasi masih boleh berjalan dengan lancar. Jadi poster asal cuma malas sikit.

Alamat kod sumber:

https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/coolClock/index.html