粒子拼字效果（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 = 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方法）的更多相关文章

Firemonkey TComboBox 下拉菜单字型修改方法 (D10)
在 FMX 下的 TComboBox 下拉菜单字型修改有二种方法: uses FMX.Pickers; 使用 Style,需先设定好 Style 后,再指定预设项的 Style,方法如下: proce ...
Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录使用方法自定义参数相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
iOS CAEmitterLayer 实现粒子发射动画效果
iOS CAEmitterLayer 实现粒子发射动画效果效果图代码已上传 GitHub:https://github.com/Silence-GitHub/CoreAnimationDemo 动 ...
PS 软件操作应用处理——粒子化任务效果
前言 JRedu 上次分享中,给大家介绍了一些图片的处理方法,主要是通过滤镜里的功能,把图片处理成素描效果或者水彩画效果,营造出不同的氛围. PS是一款非常强大的软件,包含了非常多的功能,合成 ...
浅谈分词算法（4）基于字的分词方法（CRF）
目录前言目录条件随机场(conditional random field CRF) 核心点线性链条件随机场简化形式 CRF分词 CRF VS HMM 代码实现训练代码实验结果参考文献 ...
浅谈分词算法（3）基于字的分词方法（HMM）
目录前言目录隐马尔可夫模型(Hidden Markov Model,HMM) HMM分词两个假设 Viterbi算法代码实现实现效果完整代码参考文献前言在浅谈分词算法(1)分词中的 ...
[iOS] Edit / Memo 原生控件才提供拼字检查
在 iOS 平台提供了英文拼字检查,但需将 ControlType 设定为 Platform 才能使用: 效果:
浅谈分词算法基于字的分词方法（HMM）
前言在浅谈分词算法(1)分词中的基本问题我们讨论过基于词典的分词和基于字的分词两大类,在浅谈分词算法(2)基于词典的分词方法文中我们利用n-gram实现了基于词典的分词方法.在(1)中,我们也讨论了 ...
JavaScript js无间断滚动效果 scrollLeft方法使用模板
JavaScript js无间断滚动效果 scrollLeft方法使用模板 <!DOCTYPE HTML><html><head><meta charset ...

随机推荐

读写hdfs文件（工作笔记）
import java.io.IOException; import java.io.InputStream; import java.util.List; import java.util.Map; ...
spring中订阅redis键值过期消息通知
1.首先启用redis通知功能(ubuntu下操作):编辑/etc/redis/redis.conf文件,添加或启用以下内容(过期通知): notify-keyspace-events Ex 或者登陆 ...
deep learning 练习多变量线性回归
多变量线性回归(Multivariate Linear Regression) 作业来自链接:http://openclassroom.stanford.edu/MainFolder/Document ...
Python操作Excel之xlrd
import xlrdworkbooks=xlrd.open_workbook("test.xlsx")print(workbooks.sheet_names())#获取sheet ...
APP开发和web开发的区别
1.web开发: 1.浏览器直接访问,协议是http,基本都是PC访问,也就是在家和办公场合,网络比较好. 2.web如果多个服务集成的话使用的是ESB来统一集成 2.APP开发 1.手机app客户端 ...
mvc ajax csrf
http://www.cnblogs.com/zhyp/p/5556980.html http://www.asp.net/web-api/overview/security/preventing-c ...
Servers
Servers¶ Server interface. class novaclient.v1_1.servers.Server(manager, info, loaded=False) Bases: ...
C++注意
断言assert是仅在Debug版本起作用的宏,它用于检查“不应该”发生的情况. 在函数的入口处,使用断言检查参数的有效性(合法性). 如果程序在assert处终止了,并不是说含有该assert的函数 ...
Struts2：上传下载
ud_upload.jsp <s:form action="fileupload" enctype="multipart/form-data"> & ...
jQuery检测滚动条(scroll)是否到达底部
一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height() 获取整个页面的高度 $(window).height() ...

粒子拼字效果（getImageData方法）

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

随机推荐

热门专题