1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.     <style>
  6.         *{margin:0;padding:0;}
  7.         body{background:#000;overflow:hidden;}
  8.         input{
  9.             width: 150px;
  10.             height: 30px;
  11.             margin-left:-75px;
  12.             position:absolute;
  13.             bottom:30px;
  14.             left:50%;
  15.             background: #fcfff4;
  16.             background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  17.             box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  18.             border:none;
  19.             border-radius:10px;
  20.             text-indent:30px;
  21.         }
  22.         input,button:focus{
  23.             outline:none;
  24.         }
  25.         button{
  26.             width: 30px;
  27.             height: 30px;
  28.             margin-left:45px;
  29.             border:none;
  30.             border-radius:10px;
  31.             background: #fcfff4;
  32.             background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  33.             box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  34.             position:absolute;
  35.             bottom:30px;
  36.             left:50%;
  37.         }
  38.     </style>
  39. </head>
  40. <script type="text/javascript">
  41. window.onload = function(){
  42.     canvas = document.getElementById("mycanvas");
  43.     ctx = canvas.getContext("2d");
  44.     focallength = 250;
  45.     var txt = document.getElementById("txt");
  46.     var btn = document.getElementById("btn");
  47.     var particleArr = getImgData(txt.value);
  48.     var pause = false;
  49.     var timer;
  50.     //初始化位置
  51.     initMove();
  52.  
  53.     function initMove(){
  54.         particleArr.forEach(function(){
  55.             this.locx =parseInt(Math.random()*canvas.width);
  56.             this.locy =parseInt(Math.random()*canvas.height);
  57.             this.locz =Math.random()*focallength*2 - focallength;
  58.             this.x =parseInt(Math.random()*canvas.width);
  59.             this.y =parseInt(Math.random()*canvas.height);
  60.             this.z = Math.random()*focallength*2 - focallength;
  61.             this.paint();
  62.         });
  63.         startMove();
  64.  
  65.     }
  66.     //速度
  67.     var lastTime;
  68.     var derection = true;
  69.     function startMove(){
  70.         clearInterval(timer);
  71.         var thisTime = new Date();
  72.         ctx.clearRect(0,0,canvas.width , canvas.height);
  73.         particleArr.forEach(function(){
  74.             var particle = this;
  75.             if(derection){
  76.                 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) {
  77.                     particle.x = particle.disx;
  78.                     particle.y = particle.disy;
  79.                     particle.z = particle.disz;
  80.                     if(thisTime - lastTime > 300){
  81.                         derection = false;
  82.                     }
  83.                 }else{
  84.                     particle.x = particle.x + (particle.disx - particle.x) * 0.1;
  85.                     particle.y = particle.y + (particle.disy - particle.y) * 0.1;
  86.                     particle.z = particle.z + (particle.disz - particle.z) * 0.1;
  87.                     lastTime = new Date()
  88.                 }
  89.             }else{
  90.                 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) {
  91.                     particle.x = particle.locx;
  92.                     particle.y = particle.locy;
  93.                     particle.z = particle.locz;
  94.                     pause = true;
  95.                     clearInterval(timer);
  96.                     move();
  97.                 }else{
  98.                     particle.x = particle.x + (particle.locx - particle.x) * 0.1;
  99.                     particle.y = particle.y + (particle.locy - particle.y) * 0.1;
  100.                     particle.z = particle.z + (particle.locz - particle.z) * 0.1;
  101.                     pause = false;
  102.                 }
  103.             }
  104.             particle.paint();
  105.         });
  106.         if(!pause) {
  107.             if("requestAnimationFrame" in window){
  108.                 requestAnimationFrame(startMove);
  109.             }
  110.             else if("webkitRequestAnimationFrame" in window){
  111.                 webkitRequestAnimationFrame(startMove);
  112.             }
  113.             else if("msRequestAnimationFrame" in window){
  114.                 msRequestAnimationFrame(startMove);
  115.             }
  116.             else if("mozRequestAnimationFrame" in window){
  117.                 mozRequestAnimationFrame(startMove);
  118.             }
  119.         }
  120.     }
  121.     //点击改变文字
  122.     btn.onclick = function(){
  123.         if(!pause){
  124.             return
  125.         }
  126.         clearInterval(timer);
  127.         particleArr = getImgData(txt.value);
  128.         derection=true;
  129.         pause = false;
  130.         initMove();
  131.     }
  132.     //键盘回车按键
  133.     document.onkeydown=function(e) {
  134.         var e = e || event
  135.         if(!pause){
  136.             return
  137.         }
  138.         if(e.keyCode=="13"){
  139.             clearInterval(timer)
  140.             particleArr = getImgData(txt.value);
  141.             derection=true;
  142.             pause = false;
  143.             initMove();
  144.         }
  145.     }
  146.     function move(){
  147.         timer = setInterval(makeParticle,10)
  148.     }
  149.     function makeParticle(){
  150.         ctx.clearRect(0,0,1432,768);
  151.         for(var i = 0 ; i < particleArr.length; i++){
  152.             var particle = particleArr[i];
  153.             particle.paint();
  154.         }
  155.     }
  156. }
  157.     Array.prototype.forEach = function(callback){
  158.         for(var i=0;i<this.length;i++){
  159.             callback.call(this[i]);
  160.         }
  161.     }
  162.     //根据getImageData接口重绘文字
  163.     function getImgData(text){
  164.         drawText(text);
  165.         var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
  166.         ctx.clearRect(0,0,canvas.width,canvas.height);
  167.         var newArr = [];
  168.         for(var i = 0 ; i < imgData.width ; i +=6){
  169.             for(var j = 0 ; j < imgData.height ; j+=6){
  170.                 var num = (j*imgData.width+i)*4;
  171.                 if(imgData.data[num]>=128){
  172.                     var particle = new Particle(i-3,j-3,0,3);
  173.                     newArr.push(particle);
  174.                 }
  175.             }
  176.         }
  177.         return newArr
  178.     }
  179.     //画字
  180.     function drawText(text){
  181.         ctx.clearRect(0,0,canvas.width,canvas.height);
  182.         ctx.save();
  183.         ctx.font = "200px 微软雅黑 bold";
  184.         ctx.fillStyle ="rgba(255,255,255,1)";//纯色 方便扫面
  185.         ctx.textAlign = "center";
  186.         ctx.textBaseline = "middle";
  187.         ctx.fillText(text , canvas.width/2 , canvas.height/2);
  188.         ctx.restore();
  189.  
  190.     }
  191.     //定义粒子 构造函数
  192.     var Particle = function(x,y,z,r){
  193.         this.disx = x;//文字锁定的位置
  194.         this.disy = y;
  195.         this.disz = z;
  196.         this.x = x;
  197.         this.y = y;
  198.         this.z = z;
  199.         this.locx = 0;
  200.         this.locy = 0;//   运动前位置
  201.         this.locz = 0;
  202.         this.radius = r;
  203.         this.col = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)";
  204.     }
  205.     Particle.prototype={
  206.         paint:function(){
  207.             ctx.save();
  208.             ctx.beginPath();
  209.             var scale = focallength/(focallength + this.z);
  210.             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);
  211.             ctx.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+ scale +")";
  212.             ctx.fill()
  213.             ctx.restore();
  214.         }
  215.     }
  216. </script>
  217. <body>
  218.     <canvas id = "mycanvas" width="1423" height = "768" ></canvas>
  219.     <input type="text" value="Canvas" id="txt">
  220.     <button id = "btn">获取</button>
  221. </body>
  222. </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. Linux通过NAT方式配置网络

    步骤:1.将虚拟机的网卡VMware Network Adapter VMnet8改成DHCP自动获取IP.2.将Linux虚拟机的网卡自定义连接到VMware Network Adapter VMn ...

  2. 怎么打开sql server 数据库日志文件

    To Open Log File Viewer, 1. Expand Server Node > 2. Expand SQL Server Agent > 3. Expand Jobs & ...

  3. selenium查找动态的iframe的name

    WebElement frame1 = driver.findElement(By.xpath("/html/body/div[9]/div[2]/div/iframe"));dr ...

  4. 【解决】若要使用报表生成器，必须在此计算机上安装 .Net Framework 3.5

    在报表库中试图通过点击菜单“在报表生成器中编辑”编辑报表时,会跳转到错误信息页面,提示: 若要使用报表生成器,必须在此计算机上安装 .Net Framework 3.5. 一般情况下并不是因为没有安装 ...

  5. 【原创】ORACLE常见使用问题解决

    ORACLE常见使用问题解决 一.安装了oracle客户端后,发现plsql客户端找不到之前已经配置过的TNS连接信息 或许大家再使用ORACLE软件的过程中,经常会遇到这样的问题: 问题现象描述: ...

  6. 创建一个List获取数据的lookup

    第一步,在类:syslookup中新建方法 public static client void lookupList(FormStringControl _formStringControl, Lis ...

  7. AS3 从外部SWF中获取资源的方法（ApplicationDomain的使用）

    package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Loader; ...

  8. 转：C# 中 MSCHART 饼状图显示百分比

    转自:http://blog.sina.com.cn/s/blog_51beaf0e0100yffo.html 1)显示百分比 Chart1.Series["Series1"].L ...

  9. shallow copy 和 deep copy 的示例

    本文属原创,转载请注明出处:http://www.cnblogs.com/robinjava77/p/5481874.html   (Robin) Student package base; impo ...

  10. 【MySQL】 GTID使用

    参考:http://hcymysql.blog.51cto.com/5223301/1579197 参考:http://blog.itpub.net/29733787/viewspace-146255 ...