粒子拼字效果（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 ...
随机推荐
- OAF_开发系列18_实现OAF页面跳转setForwardURL / forwardImmediately（案例）
20150716 Created By BaoXinjian
- lsyncd 实时同步
1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案,原先使用的是inotify + rsync,但随着文件数量的增大到100W+,目录下的 ...
- selenium之操作ChromeDriver
链接:http://www.testwo.com/blog/6931 1.下载ChromeDriver驱动包(下载地址: http://chromedriver.storage.googleapis. ...
- 编译器zynq设置环境变量
设置临时环境变量export CROSS_COMPILE=arm-xilinx-linux-gnueabi- export PATH=/work/tool/cross_compiler/bin:$PA ...
- OpenLayers 3 基础知识（一）
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问. 要在你的网页中使用OpenLayers(现用版本:v3.19,1), ...
- Python格式化字符串和转义字符
地址:http://blog.chinaunix.net/uid-20794157-id-3038417.html Python格式化字符串的替代符以及含义 符 号 说 明 ...
- JAVA新手笔记 Intent对象和Bundle对象
Intent对象和Bundle对象 功能主要是在 MainActivity中定义了2个EditText,当用户输入内容,把他传入到第二个活动, 自己新创的活动中,MyActivity中 放在MainA ...
- cpio命令用法
[转自]流浪妖精のSKY http://www.cnitblog.com/flutist1225/articles/18974.html cpio命令用法 cpio命令 利用cpio 可 ...
- Build subversion 1.8 with SSL on OS X Yosemite
mkdir -p /tmp/buildroot && cd /tmp/buildroot # Need to build the latest libtool and automake ...
- windows下sass安装 以及一些要注意的问题
都说sass 环境难配其时也没那么难 按照以下步骤一下一下来还是挺快的 如果你是喜欢less 那就当我没说 233333 1.sass 是基于ruby这门语言的需要使用 rubygem这个包管理器安装 ...