<!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 = ctx.getImageData(0,0,canvas.width,canvas.height);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        var newArr = [];
        for(var i = 0 ; i < imgData.width ; i +=6){
            for(var j = 0 ; j < imgData.height ; j+=6){
                var num = (j*imgData.width+i)*4;
                if(imgData.data[num]>=128){
                    var particle = new Particle(i-3,j-3,0,3);
                    newArr.push(particle);
                }
            }
        }
        return newArr
    }
    //画字
    function drawText(text){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save();
        ctx.font = "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="Canvas" id="txt">
    <button id = "btn">获取</button>
</body>
</html>

  

粒子拼字效果(getImageData方法)的更多相关文章

  1. Firemonkey TComboBox 下拉菜单字型修改方法 (D10)

    在 FMX 下的 TComboBox 下拉菜单字型修改有二种方法: uses FMX.Pickers; 使用 Style,需先设定好 Style 后,再指定预设项的 Style,方法如下: proce ...

  2. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  3. iOS CAEmitterLayer 实现粒子发射动画效果

    iOS CAEmitterLayer 实现粒子发射动画效果 效果图 代码已上传 GitHub:https://github.com/Silence-GitHub/CoreAnimationDemo 动 ...

  4. PS 软件操作应用处理——粒子化任务效果

      前  言 JRedu 上次分享中,给大家介绍了一些图片的处理方法,主要是通过滤镜里的功能,把图片处理成素描效果或者水彩画效果,营造出不同的氛围. PS是一款非常强大的软件,包含了非常多的功能,合成 ...

  5. 浅谈分词算法(4)基于字的分词方法(CRF)

    目录 前言 目录 条件随机场(conditional random field CRF) 核心点 线性链条件随机场 简化形式 CRF分词 CRF VS HMM 代码实现 训练代码 实验结果 参考文献 ...

  6. 浅谈分词算法(3)基于字的分词方法(HMM)

    目录 前言 目录 隐马尔可夫模型(Hidden Markov Model,HMM) HMM分词 两个假设 Viterbi算法 代码实现 实现效果 完整代码 参考文献 前言 在浅谈分词算法(1)分词中的 ...

  7. [iOS] Edit / Memo 原生控件才提供拼字检查

    在 iOS 平台提供了英文拼字检查,但需将 ControlType 设定为 Platform 才能使用: 效果:

  8. 浅谈分词算法基于字的分词方法(HMM)

    前言 在浅谈分词算法(1)分词中的基本问题我们讨论过基于词典的分词和基于字的分词两大类,在浅谈分词算法(2)基于词典的分词方法文中我们利用n-gram实现了基于词典的分词方法.在(1)中,我们也讨论了 ...

  9. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

随机推荐

  1. LeetCode-3LongestSubstringWithoutRepeatingCharacters(C#)

    # 题目 3. Longest Substring Without Repeating Characters Given a string, find the length of the longes ...

  2. 说说Web.Config与App.Config

    说到web.config和app.config大家都很熟悉,我们都叫他们配置文件,平时用的多,注意的少.两个有啥区别呢,很简单,一句话:如果是web程序,如webform项目类型和mvc项目类型就是w ...

  3. JQuery 操作按钮遮罩(删除)

    HTML代码: <input type="button" class="delete_btn" value="删 除" /> & ...

  4. sctp和tcp的区别

    作为一个传输层协议,SCTP兼有TCP及UDP两者的特点.SCTP可以称为是TCP的改进协议,但他们之间仍然存在着较大的差别.首先SCTP和TCP之间的最大区别是SCTP的连接可以是多宿主连接的,TC ...

  5. eclispe 出现超内纯错误

    刚开始以为只要修改tomcat的最大最小内存就可以,结果还是报错,后来才懂需要在eclipse.ini文件中修改 -Xms256m-Xmx512m的值改大些,增加虚拟机运行的内存空间 刚开始最小值只有 ...

  6. Oracle-表被锁住

    1.如果update 某个表,没有报错,等待很久都没结束,那很有可能是表被锁了. 2.查看被锁的对象 select sid,serial#,username,SCHEMANAME,osuser,MAC ...

  7. Android模拟器

    一.Genymotion 1.下载安装:https://www.genymotion.com/download/  (注:安装前需要先注册) 因为Genymotion运行需要VirtualBox,如果 ...

  8. POJ 3294 n个串中至少一半的串共享的最长公共子串

    Life Forms Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 12484   Accepted: 3502 Descr ...

  9. 北京大学Cousera学习笔记--6-计算导论与C语言基础--计算机的基本原理-认识程序设计语言 如何学习

    1.是一门高级程序语言 低级语言-机器语言(二进制) 汇编语言-load add save mult 高级语言:有利于人们编写理解 2.C语言的规范定义非常的宽泛 1.long型数据长度不短于int型 ...

  10. Linux第五节课学习笔记

    Linux系统中的一切都是文件,命令就是命令文件. 命令执行分为4步: 1.路径+命令名称. 2.别名.可用alias命令创建别名. 3.内部命令. 4.外部命令.99%的情况都属于第四种.定义这些路 ...