输入文字canvas离子动画，一起来玩下吧
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body,html{
font-family:"Microsoft Yahei";
}
#can{
display:block;
margin:0 auto;
}
#wrap{
width:500px;
height:100px;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<canvas id="can" width="1000" height="500">浏览器不支持canvas</canvas>
<div id="wrap">
<input type="text" id="text" value="人决定一切" width="80px"><input type="submit" id="submit">
</div>
<script type="text/javascript">
window.onload = function(){
var submitDom = document.getElementById("submit");
var textDom = document.getElementById("text");
var can = document.getElementById("can");
var ctx = can.getContext("2d");
var textVal = "";
var initz = 250;
var thisTIme = null;
var animTime = null;
var grains = [];
function initAnimate(){
grains = [];
textVal = textDom.value;
drawText(textVal);
var imgDate = ctx.getImageData(0,0,can.width,can.height);
ctx.clearRect(0,0,can.width , can.height);
for(var i=0;i<imgDate.width;i+=6){
for(var j=0;j<imgDate.height;j+=6){
var index = (j*imgDate.width + i)*4;
if(imgDate.data[index]>128){
var grain = new Grain(i,j,0,3);
grains.push(grain);
}
}
}
animate();
}
var lock = true;
var pause = false;
/*
this.x = Math.random()*can.width;//x轴坐标
this.y = Math.random()*can.height;//y轴坐标
this.z = Math.random()*initz*2;//z轴坐标
this.ix = Math.random()*can.width;//初始化x轴坐标
this.iy = Math.random()*can.height;//初始化y轴坐标
this.iz = Math.random()*initz*2;//初始化z轴坐标
this.tx = x;//目标x轴坐标
this.ty = y;//目标y轴坐标
this.tz = z;//目标z轴坐标
*/
function animate(){
thisTIme = new Date();
ctx.clearRect(0,0,can.width,can.height);
grains.forEach(function(item){
if(lock){
if(Math.abs(item.tx-item.x)<0.1&&Math.abs(item.ty-item.y)<0.1&&Math.abs(item.tz-item.z)<0.1){
item.x = item.tx;
item.y = item.ty;
item.z = item.tz;
if(thisTIme-animTime>300) lock = false;
} else{
item.x += (item.tx-item.x)*0.1;
item.y += (item.ty-item.y)*0.1;
item.z += (item.tz-item.z)*0.1;
animTime = new Date();
}
}else{
if(Math.abs(item.ix-item.x)<0.1&&Math.abs(item.iy-item.y)<0.1&&Math.abs(item.iz-item.z)<0.1){
item.x = item.ix;
item.y = item.iy;
item.z = item.iz;
pause = true;
console.log("执行完毕！");
} else{
item.x += (item.ix-item.x)*0.1;
item.y += (item.iy-item.y)*0.1;
item.z += (item.iz-item.z)*0.1;
pause = false;
}
}
item.draw();
})
if(!pause) {
if("requestAnimationFrame" in window){
requestAnimationFrame(animate);
}
else if("webkitRequestAnimationFrame" in window){
webkitRequestAnimationFrame(animate);
}
else if("msRequestAnimationFrame" in window){
msRequestAnimationFrame(animate);
}
else if("mozRequestAnimationFrame" in window){
mozRequestAnimationFrame(animate);
}
}
}
function Grain(x,y,z,r){
this.x = Math.random()*can.width;//x轴坐标
this.y = Math.random()*can.height;//y轴坐标
this.z = Math.random()*initz*2-initz;//z轴坐标
this.ix = Math.random()*can.width;//初始化x轴坐标
this.iy = Math.random()*can.height;//初始化y轴坐标
this.iz = Math.random()*initz*2-initz;//初始化z轴坐标
this.tx = x;//目标x轴坐标
this.ty = y;//目标y轴坐标
this.tz = 0;
this.r = r;//粒子半径
}
Grain.prototype = {
draw : function(){
ctx.save();
ctx.beginPath();
var scale = initz/(initz + this.z);
ctx.fillStyle = "rgba(50,50,50,"+ scale +")";
ctx.arc(can.width/2 + (this.x-can.width/2)*scale , can.height/2 + (this.y-can.height/2) * scale, this.r*scale , 0 , 2*Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
function drawText(text){
ctx.save();
ctx.font = "200px 微软雅黑 bold";
ctx.fillStyle = "rgba(168,168,168,1)";
ctx.textAlign = "center"
ctx.textBaseLine = "middle";
ctx.fillText(text,can.width/2,can.height/2);
ctx.restore();
}
submitDom.onclick = function(){
initAnimate();
lock = true;
pause = false;
}
initAnimate();
}
</script>
</body>
</html>
网友评论文明上网理性发言 已有0人参与
发表评论: