Rumah > Artikel > hujung hadapan web > Tutorial membuat jam digital dengan petua tutorial HTML5_html5
Tutorial membuat jam digital dengan petua tutorial HTML5_html5
- WBOYasal
- 2016-05-16 15:46:352373semak imbas
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
- var numData = [
- "1111/1001/1001/1001/1001/1001/1111", //0
- "0001/0001/0001/0001/0001/0001/0001", //1
- "1111/0001/0001/1111/1000/1000/1111", //2
- "1111/0001/0001/1111/0001/0001/1111", //3
- "1010/1010/1010/1111/0010/0010/0010", //4
- "1111/1000/1000/1111/0001/0001/1111", //5
- "1111/1000/1000/1111/1001/1001/1111", //6
- "1111/0001/0001/0001/0001/0001/0001", //7
- "1111/1001/1001/1111/1001/1001/1111", //8
- "1111/1001/1001/1111/0001/0001/1111", //9
- "0000/0000/0010/0000/0010/0000/0000", //:
- ]
0 bermaksud tiada piksel, 1 bermakna ada piksel, / adalah untuk penampilan yang lebih baik, ia adalah cawangan Secara ringkasnya: sebagai contoh, 0 ialah:
- 1 1 1 1
- 1 0 0 1
- 1 0 0 1
- 1 0 0 1
- 1 0 0 1
- 1 0 0 1
- 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:
- var P_radius = 8,Graviti = 9.8;
- var Zarah = fungsi(){
- ini.x = 0;
- ini.y = 0;
- ini.vx = 0;
- ini.vy = 0;
- warna ini = "";
- ini.kelihatan = salah;
- ini.jatuhkan = salah;
- }
- Partikel.prototaip = {
- pembina:Zarah,
- paint:function(){ //绘制自身
- ctx.fillStyle = ini.warna;
- ctx.beginPath();
- ctx.arc(this.x,this.y,P_radius,0,2*Math.PI);
- ctx.fill();
- },
- set semula:fungsi(x,y,warna){ //重置
- ini.x = x;
- ini.y = y;
- ini.vx = 0;
- ini.vy = 0;
- warna ini = warna;
- ini.kelihatan = benar;
- this.drop = false;
- },
- isDrop:function(){ //落下
- this.drop = benar;
- var vx = Matematik.random()*20 15>
- ini.vx = Matematik.rawak() =0.5?-vx : vx;
- },
- kemas kini:fungsi(masa){ //每一帧的动作
- jika (this.drop){
- ini.x = ini.vx*masa;
- ini.y = ini.vy*masa;
- var vy = ini.vy Graviti*masa;
- jika(ini.y>=canvas.height-P_radius){
- ini.y = kanvas.tinggi >.tinggi >
- vy = -vy*0.7;
- }
- ini.vy = vy;
- jika(ini.x<-P_radius||ini.x<🎜;>&g 🎜>kanvas.lebar P_radius||ini.y<-P_radius||ini.y>kanvas.tinggi P_radius){
- ini.kelihatan = salah; }
- }
- }
- }
写好粒子对象后，就要考虑如何让粒子按照位置画上去，同时当粒虑如何让粒子按照位置画上去，同时当粒空子他做自由落体的动画了。
先画背景（也就是那没有像素的白点）：
- fungsi drawBg(){
- var tx = (kanvas.width-((P_radius*2 X_J)*4*8 7*xjg))/2;
- untuk(var i=0;i< 🎜>8;i ){
- var ty = (canvas.height-((P_radius yjg)*6))/2;
- untuk(var j=0;j<><<🎜 🎜>numData[0].panjang;j ){
- var tt = numData[0].charAt(j);
- jika(tt==="/"){
- ty =yjg;
- }lain {
- var x = tx j%5*(P_J🎜),* (X_🎜) >
- y = ty;
- bgctx.fillStyle = "#FFF"; bgctx.beginPath();
- bgctx.arc(x,y,P_radius,0,2*Math.PI);
- bgctx.fill();
- }
- }
- tx =xjg 4*(P_radius*2 X_J);
- }
- }
- fungsi setMasa(masa){
- var h = masa.getHours() "",
- m = masa.getMinutes() "", <🎜
- s = masa.getSeconds() "";
- hh = h.panjang===1?"0" h:h;
- mm = m.panjang===1?"0" m:m;
- ss = s.panjang===1?"0" s:s;
- var kini = h ":" m ":" s;
- var tx = (kanvas.width-((P_radius*2 X_J)*4*8 7*xjg))/2,warna = "";
- untuk(var i=0;i< 🎜>nowdate.length;i ){
- var n = kini.charAt(i)===":"?10:par nowdate.charAt(i)),
- teks = numData[n];
- var ty = (canvas.height-((P_radius yjg)*6))/2;
- suis(i){
- kes 0:warna = "#4DCB74";pecah;
- kes 2:warna = "#4062E0";pecah;
- kes 3:warna = "#D65050";pecah;
- kes 5:warna = "#4062E0";pecah;
- kes 6:warna = "#797C17";pecah;
- }
- untuk(var j=0;j<><<🎜 🎜>teks.panjang;j ){
- var tt = teks.charAt(j);
- jika(tt==="/"){
- ty =yjg;
- }lain{
- var x = tx j%5*(P_J🎜),* (X_🎜) >
- y = ty, ,
- pp = null, >, >
- berguna = null; zarah.untukSetiap(fungsi(p){
- jika(p.boleh dilihat&
- p.x===x&p.yp.y🎜 >
- ppp = p; }lain jika(!p.visible&berguna===null){
- berguna = p;
- }
- });
- jika(pp!==null&tt==="0"){
- pp.isDrop();
- } lain jika(pp===null&tt= =="🎜{>= =="1") >
- usefullp.reset(x , y , color);
- }
- }
- }
- tx =xjg 4*(P_radius*2 X_J);
- }
- }
- var timeCount_0 = 0,timeCount_1 = 0 ,zarah = [];
- fungsi initAnimate(){
- untuk(var i=0;i< 🎜>200;i ){
- var p = baharu Zarah();
- zarah.push(p);
- }
- timeCount_0 = baharu Tarikh();
- timeCount_1 = baharu Tarikh();
- drawBg();
- setTime(timeCount_0)
- bernyawa();
- }
- fungsi menghidupkan(){
- ctx.clearRect(0,0,canvas.width,canvas.height);
- ctx.drawImage(bgcanvas,0,0);
- var timeCount_2 = baharu Tarikh();
- if(timeCount_1-timeCount_0>=1000){
- setTime(timeCount_1);
- timeCount_0 = timeCount_1;
- }
- zarah.forEach(fungsi(p){
- jika(p.boleh dilihat){
- p.kemas kini((timeCount_2-timeCount_1)/70);
- p.paint();
- }
- });
- timeCount_1 = timeCount_2
- RAF(bernyawa)
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:
时间设置也写好了，就可以写舞台更新的代码了：
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