粒子拼字效果（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 ...
随机推荐
- js加解密
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- git学习3：远程仓库
Git是分布式版本控制系统,同一个git仓库,可以分布到不同的机器上,那么需要有一台机器上有一个原始版本库,这样别的机器可以克隆这个原始版本库,那么这台机器就是github. 1,创建SSH Key. ...
- 安装lua和openresty
#### ubuntu 16.04 64bit 安装Lua luajit 及openresty 1 安装lua ,因为luajit 支持lua5.1较好.貌似不支持5.2和5.3作为学习,我就安装5. ...
- java如何提取url里的域名
使用java标准类库java.net.URL java.net.URL url = new java.net.URL("http://blog.csdn.net/zhujianlin19 ...
- css的简写规范
css简写有这么几个好处,第一个也是最大的好处就是减少了代码的数量.第二个就是方便自己的编写吧. 下面来介绍几个常见的css属性简写规则. 一.字体(font) font-style:设置字体的样式. ...
- SQL Server安全概念简析
I. 登录名与用户名 登录名: 访问数据库服务器的账户.登录名可以登录到服务器,但不能直接访问数据库内容.数据库连接串中的用户名应配置为登录名.每个登录名的定义存放在master数据库的syslogi ...
- 64位电脑上配置mysql-connector-odbc的方法
在系统盘搜索odbcad32,选择在C:\Windows\SysWOW64内的文件
- 4、IMS
链:1:http://www.cnblogs.com/gnuhpc/archive/2012/12/11/2813494.html [笔记] 1.<计算机网络(第五版)>P10-15:电路 ...
- JavaScript笔记基础篇(三)
针对前段JS获取当前时间或者对时间数据处理方法汇总: javascript 字符串转化为日期 Java代码 var s="2010-5-18 12:30:20"; var t= ...
- mongoDB数据库和Spring MVC的整合
之前一直用到的项目是Spring MVC+maven+mysql的,最近有些数据需要用到mongoDB数据库,现在做一些总结. 第一步:加载jar.maven配置 <!-- mongodb开始 ...