粒子拼字效果（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 ...
随机推荐
- oleDB 导入excel遇到的问题
本地测试一切ok. 到服务器上测试各种报错,先装了office2010,又装了AccessDatabaseEngine,之后报"Microsoft Excel 不能访问文件 可能的原因有: ...
- 【HOW】如何手工编辑InfoPath文件
因为直接打开InfoPath的配置文件进行编辑会有些无从下手,所以下面以修改“节”的Margin为例来说明手工编辑InfoPath文件的过程. 1. 新建一个“节”,并在此节中创建一个数字类型字段“n ...
- 问题解决_(转载)在VisualStudio 2012上使用MVC3出现错误的解决办法
错误: 找 不到方 法:“System.Collections.Generic.Dictionary`2<System.String,BlockParser> System.Web.Raz ...
- 修改.gitignore后让其生效
在使用git的时候我们有时候需要忽略一些文件或者文件夹.我们一般在仓库的根目录创建.gitignore文件在提交之前,修改.gitignore文件,添加需要忽略的文件.然后再做add commit p ...
- 在Excel VBA中将SQL查询的结果赋值给变量的方法
直接上代码示例: nowdate为日期型变量 strSql = "select DISTINCT 日期 from new_ubi_data ORDER BY 日期 DESC Limit 0, ...
- 封装tip控件
在界面上有时需要显示一个提示,大多的前端框架都把提示做成一个带有小尖角的提示框,因此自己也仿照了实现了一下,效果图如下: 尖角的实现很简单的,一般都是通过css将div的宽高设置为0,然后将尖角朝向的 ...
- texy
网络组件 WebView注册代码 <uses-permission android:name ="android.permission.INTERNET" /> 解释网 ...
- Android驱动开发之Hello实例
Android驱动开发之Hello实例: 驱动部分 modified: kernel/arch/arm/configs/msm8909-1gb_w100_hd720p-perf_defconf ...
- c#修改config中的AppSettings属性
Configuration cfa = ConfigurationManager.OpenExeConfiguration(ConfigurationUserLevel.None); cfa.AppS ...
- EhCache缓存
EhCache缓存 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. Ehcache是一种广泛使用的开源Java分布式缓 ...