首页 > 代码库 > 粒子拼字效果(getImageData方法)

粒子拼字效果(getImageData方法)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        *{margin:0;padding:0;}
        body{background:#000;overflow:hidden;}
        input{
            width: 150px;
            height: 30px;
            margin-left:-75px;
            position:absolute;
            bottom:30px;
            left:50%;
            background: #fcfff4;
            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
            border:none;
            border-radius:10px;
            text-indent:30px;
        }
        input,button:focus{
            outline:none;
        }
        button{
            width: 30px;
            height: 30px;
            margin-left:45px;
            border:none;
            border-radius:10px;
            background: #fcfff4;
            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
            position:absolute;
            bottom:30px;
            left:50%;
        }
    </style>
</head>
<script type="text/javascript">
window.onload = function(){
    canvas = document.getElementById("mycanvas");
    ctx = canvas.getContext("2d");
    focallength = 250;
    var txt = document.getElementById("txt");
    var btn = document.getElementById("btn");
    var particleArr = getImgData(txt.value);
    var pause = false;
    var timer;
    //初始化位置
    initMove();

    function initMove(){
        particleArr.forEach(function(){
            this.locx =parseInt(Math.random()*canvas.width);
            this.locy =parseInt(Math.random()*canvas.height);
            this.locz =Math.random()*focallength*2 - focallength;
            this.x =parseInt(Math.random()*canvas.width);
            this.y =parseInt(Math.random()*canvas.height);
            this.z = Math.random()*focallength*2 - focallength;
            this.paint();
        });
        startMove();

    }
    //速度
    var lastTime;
    var derection = true;
    function startMove(){
        clearInterval(timer);
        var thisTime = new Date();
        ctx.clearRect(0,0,canvas.width , canvas.height);
        particleArr.forEach(function(){
            var particle = this;
            if(derection){
                if (Math.abs(particle.disx - particle.x) < 0.1 && Math.abs(particle.disy - particle.y) < 0.1 && Math.abs(particle.disz - particle.z)<0.1) {
                    particle.x = particle.disx;
                    particle.y = particle.disy;
                    particle.z = particle.disz;
                    if(thisTime - lastTime > 300){
                        derection = false;
                    }
                }else{
                    particle.x = particle.x + (particle.disx - particle.x) * 0.1;
                    particle.y = particle.y + (particle.disy - particle.y) * 0.1;
                    particle.z = particle.z + (particle.disz - particle.z) * 0.1;
                    lastTime = new Date()
                }
            }else{
                if (Math.abs(particle.locx - particle.x) < 0.1 && Math.abs(particle.locy - particle.y) < 0.1 && Math.abs(particle.locz - particle.z)<0.1) {
                    particle.x = particle.locx;
                    particle.y = particle.locy;
                    particle.z = particle.locz;
                    pause = true;
                    clearInterval(timer);
                    move();
                }else{
                    particle.x = particle.x + (particle.locx - particle.x) * 0.1;
                    particle.y = particle.y + (particle.locy - particle.y) * 0.1;
                    particle.z = particle.z + (particle.locz - particle.z) * 0.1;
                    pause = false;
                }
            }
            particle.paint();
        });
        if(!pause) {
            if("requestAnimationFrame" in window){
                requestAnimationFrame(startMove);
            }
            else if("webkitRequestAnimationFrame" in window){
                webkitRequestAnimationFrame(startMove);
            }
            else if("msRequestAnimationFrame" in window){
                msRequestAnimationFrame(startMove);
            }
            else if("mozRequestAnimationFrame" in window){
                mozRequestAnimationFrame(startMove);
            }
        }
    }
    //点击改变文字
    btn.onclick = function(){
        if(!pause){
            return
        }
        clearInterval(timer);
        particleArr = getImgData(txt.value);
        derection=true;
        pause = false;
        initMove();
    }
    //键盘回车按键
    document.onkeydown=function(e) {
        var e = e || event
        if(!pause){
            return
        }
        if(e.keyCode=="13"){
            clearInterval(timer)
            particleArr = getImgData(txt.value);
            derection=true;
            pause = false;
            initMove();
        }
    }
    function move(){
        timer = setInterval(makeParticle,10)
    }
    function makeParticle(){
        ctx.clearRect(0,0,1432,768);
        for(var i = 0 ; i < particleArr.length; i++){
            var particle = particleArr[i];
            particle.paint();
        }
    }
}
    Array.prototype.forEach = function(callback){
        for(var i=0;i<this.length;i++){
            callback.call(this[i]);
        }
    }
    //根据getImageData接口重绘文字
    function getImgData(text){
        drawText(text);
        var imgData = http://www.mamicode.com/ctx.getImageData(0,0,canvas.width,canvas.height);"200px 微软雅黑 bold";
        ctx.fillStyle ="rgba(255,255,255,1)";//纯色 方便扫面
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(text , canvas.width/2 , canvas.height/2);
        ctx.restore();

    }
    //定义粒子 构造函数
    var Particle = function(x,y,z,r){
        this.disx = x;//文字锁定的位置
        this.disy = y;
        this.disz = z;
        this.x = x;
        this.y = y;
        this.z = z;
        this.locx = 0;
        this.locy = 0;//   运动前位置
        this.locz = 0;
        this.radius = r;
        this.col = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)";
    }
    Particle.prototype={
        paint:function(){
            ctx.save();
            ctx.beginPath();
            var scale = focallength/(focallength + this.z);
            ctx.arc(canvas.width/2 + (this.x-canvas.width/2)*scale , canvas.height/2 + (this.y-canvas.height/2) * scale, this.radius*scale , 0 , 2*Math.PI);
            ctx.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+ scale +")";
            ctx.fill()
            ctx.restore();
        }
    }
</script>
<body>
    <canvas id = "mycanvas" width="1423" height = "768" ></canvas>
    <input type="text" value="http://www.mamicode.com/Canvas" id="txt">
    <button id = "btn">获取</button>
</body>
</html>

  

粒子拼字效果(getImageData方法)