canvas数字特效
canvas数字特效
<!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>
WEB前端学习交流群21 598399936
