HTML5_html5 튜토리얼 팁을 사용한 디지털 시계 만들기 튜토리얼

당시에는 좋은 아이디어라고 생각했지만 신경 쓰지 않았던 것이 바로 이 디지털 시계였습니다. 어제까지만 해도 동료가 인터넷에서 이 사례를 보고 너무 멋있다고 해서 어떻게 구현했는지 물어보더군요. 그러다가 구현 방법에 대해 고민하다가 조금 관심이 생겨 따라해 봤습니다. 하나 만들었어요. 차이점은 Cen An이 div를 사용하여 만든다는 것입니다. 그리고 저는 캔버스를 사용해서 그렸습니다. 각 점의 움직임을 제어하기 위해 js를 사용하여 dom의 스타일 속성을 제어하는 ​​것은 js를 사용하여 캔버스 그리기를 제어하는 ​​것에 비해 확실히 성능이 부족하기 때문에 성능을 위해 캔버스를 사용하는 것이 더 나을 것입니다.

먼저 제가 만든 DEMO를 살펴보고, 그 방법을 간단히 설명하자면, DEMO를 보도록 찔러주세요.

이를 수행하는 아이디어는 매우 간단하며 문자열을 통해 각 숫자의 위치를 ​​저장하는 것입니다.
코드 복사

XML/HTML 코드클립보드에 콘텐츠 복사

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은 픽셀이 없음을 의미하고, 1은 픽셀이 있음을 의미하며, /는 더 나은 모양을 위한 분기입니다. 예를 들어 0은 다음과 같습니다.

　

XML/HTML 코드클립보드에 콘텐츠 복사

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

이 점은 매우 명확합니다. 문자열로 표시되는 0부터 9까지의 : 숫자도 있습니다.

그런 다음 픽셀인 입자 개체를 작성합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. var P_radius = 8,중력 = 9.8;   
2.         var 입자 = 함수(){   
3.             this.x = 0;   
4.             this.y = 0;   
5.             this.vx = 0;   
6.             this.vy = 0;   
7.             this.color = "";   
8.             this.visible = 거짓;   
9.             this.drop = 거짓;   
10.         }   
11.         Particle.prototype = {   
12.             생성자:입자,   
13.             paint:function(){        //绘绘算自身   
14.                ctx.fillStyle = this.color;   
15.                 ctx.beginPath();   
16.                 ctx.arc(this.x,this.y,P_radius,0,2*Math.PI);   
17.                 ctx.fill();   
18.             },   
19.             reset:function(x,y,color){        //중화   
20.                this.x = x;   
21.                this.y = y;   
22.                this.vx = 0;   
23.                this.vy = 0;   
24.                this.color = color;   
25.                this.visible = true;   
26.                this.drop = false;   
27.             },   
28.             isDrop:function(){        //落下   
29.                this.drop = true;   
30.                var vx = Math.random()*20 15   
31.                this.vx = 수학.random()> =0.5?-vx : vx;   
32.             },   
33.             업데이트:기능(시간){        //每一帧적动작   
34.                 if(this.drop){   
35.                    this.x  = this.vx*time;   
36.                    this.y  = this.vy*time;   
37.   
38.                    var vy = this.vy Gravity*time;   
39.   
40.                    if(this.y>=canvas.height-P_radius){   
41.                        this.y = canvas.height-P_radius   
42.                        vy = -vy*0.7;   
43.                    }   
44.   
45.                    this.vy = vy;   
46.   
47.                    if(this.x-P_radius||this.x>canvas.width P_radius||this.y-P_radius||this.y>canvas.height P_radius){   
48.                        this.visible = false;   
49.                    }   
50.                 }   
51.             }   
52.         }　　   
53.   

페인트 제조 방법, 재설정 또는 재설정(因为粒子要徾环刪)提升性能)，isDrop是粒子落下方法，업데이트就是每一帧更新粒子的动work,update中当粒子运动超出캔버스제 区域时, 就把它的可视化置为false, 粒子容器中保存起来等待下一次调사용。

　　写好粒子对象后,就要考虑如何让粒子按光位置画上去,同时当粒子不需要用时能够让他做自由落体的动画了。

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

XML/HTML 코드复复内容到剪贴板

1. 함수 drawBg(){   
2.             var tx = (canvas.width-((P_radius*2 X_J)*4*8 7*xjg))/2;   
3.             for(var i=0;i8;i ){   
4.                var ty = (canvas.height-((P_radius yjg)*6))/2;   
5.                for(var j=0;jnumData[0].length;j ){   
6.                    var tt = numData[0].charAt(j);   
7.                    if(tt==="/"){   
8.                        ty =yjg;   
9.                    }그렇지 않으면 {   
10.                        var x = tx j%5*(P_radius*2 X_J),   
11.                            y = ty;   
12.                        bgctx.fillStyle = "#FFF";   
13.                        bgctx.beginPath();   
14.                        bgctx.arc(x,y,P_radius,0,2*Math.PI);   
15.                        bgctx.fill();   
16.                    }   
17.                 }   
18.                 tx =xjg 4*(P_radius*2 X_J);   
19.             }   
20.         }   

먼저 배경을 오프스크린 캔버스에 그려서 캐시합니다. 그러면 각 프레임을 다시 그릴 때 논리적인 계산이 필요하지 않습니다. 그냥 오프스크린 캔버스를 직접 그리면 됩니다. 위의 논리는 두 개의 루프를 통해 8개의 숫자를 반복한 다음 각 숫자를 하나씩 그리는 것입니다. "/"가 나타나면 새 줄이 필요하다는 의미이며 ty가 그려집니다. 개행 간격을 추가하고 tx를 재설정한 다음 그립니다. 그렇게 하면 모든 점을 그릴 수 있습니다. 렌더링은 다음과 같습니다.

배경을 그린 후 매초마다 디지털 픽셀을 그리기 시작합니다. 주요 방법은 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 함수 setTime(time){   
2.             var h = time.getHours() "",   
3.                분 = 시간.getMinutes() "",   
4.                s = time.getSeconds() "";   
5.            hh = h.length===1?"0" h:h;   
6.            mm = m.length===1?"0" mm;   
7.            ss = s.length===1?"0" 봄 여름 시즌;   
8.   
9.             var 현재 날짜 = h ":" m ":" s;   
10.             var tx = (canvas.width-((P_radius*2 X_J)*4*8 7*xjg))/2,색상 = "";   
11.             for(var i=0;inowdate.length;i ){   
12.                var n = 현재 날짜.charAt(i)===":"?10:parseInt( nowdate.charAt(i)),   
13.                    텍스트 = numData[n];   
14.   
15.                var ty = (canvas.height-((P_radius yjg)*6))/2;   
16.   
17.                 스위치(i){   
18.                    케이스 0:color = "#4DCB74";break;   
19.                    케이스 2:color = "#4062E0";break;   
20.                    케이스 3:color = "#D65050";break;   
21.                    케이스 5:color = "#4062E0";break;   
22.                    케이스 6:color = "#797C17";break;   
23.                 }   
24.   
25.                for(var j=0;j텍스트.길이;j ){   
26.                    var tt = text.charAt(j);   
27.                    if(tt==="/"){   
28.                        ty =yjg;   
29.                    }그 외{   
30.                        var x = tx j%5*(P_radius*2 X_J),   
31.                            y = ty,   
32.                            pp = null,   
33.                           usefullp = null;   
34.                        particles.forEach(function(p){   
35.                           if(p.visible&p.x===x&p.y===y){   
36.                               ppp = p;   
37.                            }else if(!p.visible&usefullp===null){   
38.                               usefullp = p;   
39.                           }   
40.                         });   
41.                        if(pp!==null&tt==="0"){   
42.                            pp.isDrop();   
43.                       }else if(pp===null&tt==="1"){   
44.                           usefullp.reset(x , y , color);   
45.                        }   
46.                    }   
47.                 }   
48.                 tx =xjg 4*(P_radius*2 X_J);   
49.             }   
50.         }  

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

XML/HTML 코드复复内容到剪贴板

1. var timeCount_0 = 0,timeCount_1 = 0 ,입자 = [];   
2.         함수 initAnimate(){   
3.             for(var i=0;i200;i ){   
4.                var p = new Particle();   
5.                 particles.push(p);   
6.             }   
7.   
8.             timeCount_0 = new Date();   
9.             timeCount_1 = new Date();   
10.             drawBg();   
11.             setTime(timeCount_0)   
12.             애니메이션();   
13.         }   
14.   
15.         기능 애니메이션(){   
16.             ctx.clearRect(0,0,canvas.width,canvas.height);   
17.             ctx.drawImage(bgcanvas,0,0);   
18.   
19.             var timeCount_2 = new Date();   
20.   
21.             if(timeCount_1-timeCount_0>=1000){   
22.                 setTime(timeCount_1);   
23.                timeCount_0 = timeCount_1;   
24.             }   
25.   
26.             particles.forEach(function(p){   
27.                 if(p.visible){   
28.                     p.update((timeCount_2-timeCount_1)/70);   
29.                     p.paint();   
30.                 }   
31.             });
33.  timeCount_1 = timeCount_2
35. RAF(애니메이트)
36.                                                                        

initAnimate에서 애니메이션 초기화를 수행한다는 것은 먼저 200개의 입자 개체를 인스턴스화하고 이를 입자 컨테이너에 저장하는 것을 의미합니다. 그런 다음 타임스탬프를 업데이트하고 배경을 캐시하고 현재 시간을 설정한 다음 애니메이션 루프 본문을 호출합니다. 애니메이션을 시작하려면

animate의 논리도 매우 간단합니다. 두 타임스탬프 간의 시간 차이가 1초 이상이면 setTime이 수행됩니다. 다음 단계는 입자 컨테이너의 시각화된 모든 입자를 탐색하고 다시 그리는 것입니다.

그러면 완료되었습니다.

이 효과를 위해 최적화할 수 있는 영역은 아직 많이 있습니다. 시계와 분은 상대적으로 거의 움직이지 않기 때문에 이 둘은 캐시될 수 있고, 조치가 없을 때는 캐시된 데이터를 직접 그릴 수 있습니다. 스테이지의 각 프레임에 대한 드로잉 API 호출 횟수가 늘어나 성능이 확실히 향상됩니다. 하지만 지금은 파티클 수가 많지 않고, 2~300개의 파티클 개체이면 충분합니다. 최적화가 이루어지지 않더라도 애니메이션은 여전히 ​​원활하게 실행될 수 있습니다. 그래서 원래 포스터는 조금 게으른 것뿐이었습니다.

소스 코드 주소:

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