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
- 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
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
