本来是想在项目中用的,后来跟其它效果不搭,也就算了。
一直很喜欢的前端,感觉走不了几年了,尽最后一点热量,整理一点东西了。。。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="author" content="" />
- <meta name="keywords" content="" />
- <meta name="description" content="" />
- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
- <title> new document </title>
- </head>
- <body>
- <canvas style="background:#000"></canvas>
- <script>
- (function(){
- var digit=[
- [//digit 0
- [0,1,1,1,1,1,0],
- [1,1,1,1,1,1,1],
- [1,1,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [1,1,1,1,1,1,1],
- [0,1,1,1,1,1,0]
- ],
- [//digit 1
- [0,0,0,1,1,0,0],
- [0,0,1,1,1,0,0],
- [0,1,1,1,1,0,0],
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0]
- ],
- [//digit 2
- [0,0,1,1,1,0,0],
- [0,1,1,0,1,1,0],
- [1,1,0,0,0,1,1],
- [0,0,0,0,0,1,1],
- [0,0,0,0,1,1,0],
- [0,0,0,1,1,0,0],
- [0,0,1,1,0,0,0],
- [0,1,1,0,0,0,1],
- [1,1,1,1,1,1,1],
- [1,1,1,1,1,1,1]
- ],
- [//digit 3
- [0,0,1,1,1,0,0],
- [0,1,1,0,1,1,0],
- [1,1,0,0,0,1,1],
- [0,0,0,0,0,1,1],
- [0,0,0,1,1,1,0],
- [0,0,0,1,1,1,0],
- [0,0,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [0,1,1,0,1,1,0],
- [0,0,1,1,1,0,0]
- ],
- [//digit 4
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0],
- [0,0,1,0,1,0,0],
- [0,1,1,0,1,0,0],
- [1,1,0,0,1,0,0],
- [1,1,1,1,1,1,1],
- [1,1,1,1,1,1,1],
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0]
- ],
- [//digit 5
- [0,1,1,1,1,1,0],
- [0,1,1,1,1,1,0],
- [0,1,1,0,0,0,0],
- [0,1,1,1,1,0,0],
- [0,0,0,0,1,1,0],
- [0,0,0,0,0,1,1],
- [0,0,0,0,0,1,1],
- [0,0,0,0,1,1,0],
- [0,1,1,0,1,1,0],
- [0,1,1,1,1,0,0]
- ],
- [//digit 6
- [0,0,1,1,1,0,0],
- [0,1,1,0,1,1,0],
- [0,1,1,0,0,0,0],
- [0,1,1,0,0,0,0],
- [0,1,1,1,1,1,0],
- [0,1,1,0,1,1,0],
- [0,1,1,0,0,1,1],
- [0,1,1,0,0,1,1],
- [0,1,1,0,1,1,0],
- [0,0,1,1,1,0,0]
- ],
- [//digit 7
- [1,1,1,1,1,1,0],
- [1,1,1,1,1,1,0],
- [0,0,0,0,1,1,0],
- [0,0,0,0,1,1,0],
- [0,0,0,1,1,0,0],
- [0,0,0,1,1,0,0],
- [0,0,1,1,0,0,0],
- [0,0,1,1,0,0,0],
- [0,0,1,1,0,0,0],
- [0,0,1,1,0,0,0]
- ],
- [//digit 8
- [0,0,1,1,1,0,0],
- [0,1,1,0,1,1,0],
- [1,1,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [0,1,1,1,1,1,0],
- [0,1,1,1,1,1,0],
- [1,1,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [0,1,1,0,1,1,0],
- [0,0,1,1,1,0,0]
- ],
- [//digit 9
- [0,0,1,1,1,0,0],
- [0,1,1,0,1,1,0],
- [1,1,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [0,1,1,0,0,1,1],
- [0,0,1,1,1,1,1],
- [0,0,0,0,0,1,1],
- [1,1,0,0,0,1,1],
- [0,1,1,0,0,1,1],
- [0,0,1,1,1,1,0]
- ]
- ];
- function Dot(tx,ty,x,y,radius)
- {
- this.tx=tx;
- this.ty=ty;
- this.x=x;
- this.y=y;
- this._dx=tx-x;
- this._dy=ty-y;
- this.radius=radius;
- // this.speed=0.1;
- }
- Dot.prototype={
- PI2:Math.PI*2,
- move:function(t,d){
- /*
- var speed=this.speed,
- vx=(this.tx-this.x)*speed,
- vy=(this.ty-this.y)*speed;
- this.x+=vx;
- this.y+=vy;
- if(Math.abs(this.x-this.tx)<0.5&&Math.abs(this.y-this.ty)<0.5){
- this.x=this.tx;
- this.y=this.ty;
- return false;
- }
- */
- if(t>d)
- {
- this._x=this.tx;
- this._y=this.ty;
- return false;
- }
- this._x=this.ease(this.x,this._dx,t,d);
- this._y=this.ease(this.y,this._dy,t,d);
- return true;
- },
- draw:function(ctx){
- var x=this._x,
- y=this._y,
- grd=ctx.createRadialGradient(x,y,this.radius/2,x,y,this.radius);
- grd.addColorStop(0,"#FFF");
- grd.addColorStop(1,"rgba(255,255,255,0.1)");
- ctx.fillStyle=grd;
- ctx.beginPath();
- ctx.arc(x,y,this.radius,0,this.PI2,true);
- ctx.closePath();
- ctx.fill();
- },
- ease:function(b,c,t,d){
- return (t/=d/2)<1?c/2*t*t+b:-c/2 *((--t)*(t-2)-1)+b;
- }
- };
- var num=200*Math.random()|0,
- radius=4,
- duration=60, //60frams===1秒
- dotSpace=1,
- numSpace=5,
- times=0,
- nums=num.toString().split(""),
- dots=[],
- i=0,
- ii=nums.length,
- cvs=document.querySelector("canvas"),
- width=cvs.width,
- height=cvs.height,
- ctx=cvs.getContext("2d");
- for(;i<ii;i++)
- {
- setDots(nums[i],i,dots,width,height);
- }
- function drawFrame(){
- var i=dots.length;
- ctx.clearRect(0,0,width,height);
- times++;
- while(i--){
- dots[i].move(times,duration);
- dots[i].draw(ctx);
- }
- requestAnimationFrame(drawFrame);
- }
- drawFrame();
- function setDots(num,i,dots,width,height){
- var dig=digit[num],
- y=dig.length,
- x=dig[0].length,
- dot_width=(dotSpace+radius)*2,
- num_width=dot_width*x,
- offsetY=dot_width/2,
- offsetX=i*(num_width+numSpace)+offsetY;
- j=0;
- while(y--)
- {
- j=x;
- while(j--){
- dig[y][j]&&dots.push(new Dot(offsetX+j*dot_width,offsetY+dot_width*y,Math.random()*width,Math.random()*height,radius));
- }
- }
- }
- })();
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/notes/11445/a8b3757d88f8c7f6f392cf880f19c4d3.html