Tutorial membuat jam digital dengan petua tutorial HTML5

2015511172231746.png (836×306)

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

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:

Kod XML/HTMLSalin kandungan ke papan keratan

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:

Kod XML/HTMLSalin kandungan ke papan keratan

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;

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

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

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

Kod XML/HTML

复制内容到剪贴板

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);
}
}

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:
2015511172757389.png (1282×350)

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

Kod XML/HTMLSalin kandungan ke papan keratan

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;

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);
}
}

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

Kod XML/HTML

复制内容到剪贴板

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)

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:

2015511172909169.png (1263×507) 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

Label berkaitan：

html5

sumber：php.cn

Artikel sebelumnya：Pengenalan kepada API untuk memaparkan status bateri dalam kemahiran tutorial HTML5_html5 Artikel seterusnya：Contoh terperinci menggunakan format JSON untuk menyerahkan borang dalam kemahiran tutorial HTML5_html5

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang