粒子拼字效果（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 ...
随机推荐
- Unity关于获取游戏对象
我觉得Unity里面的Transform 和 GameObject就像两个双胞胎兄弟一样,这俩哥们很要好,我能直接找到你,你也能直接找到我.我看很多人喜欢在类里面去保存GameObject对象.解决G ...
- SOCKET 服务器停止服务时清理连接操作
刚想到一个情况,正好是工作中遇到的. 当服务器停止时,正好有连接的请求正在被处理,而此时服务端需要等待该请求被正常的处理完,然后给客户端发送响应报文. 正常情况下,服务器停止的时候,是希望发送了响应报 ...
- Java生成XML文件
我们在数据库中的数据可以将其提取出来生成XML文件,方便传输.例如数据库中有Admin这张表: 我们写一个java类表示admin数据: package xmlDom.vo; import java. ...
- <2016-1-28>
1.链接的网址前加入?action=bs-transfer@mdp&url=http://www.baidu.com 2.登录页面的验证 <script> function log ...
- (Tree) 101. Symmetric Tree
Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...
- jquery 中post 、get的同步问题
jquery 中post .get的同步问题 解决方法1: 在全局设置: $.ajaxSetup({ async : false }); 然后再使用post或get方法 $.get("reg ...
- 如何彻底卸载Oracle
如何彻底卸载Oracle 因为Oracle在Windows下的卸载颇有一些麻烦,如果不能完全卸载有可能影响将来的再次安装!常规卸载方法是运行Oracle的自带的卸载程序,可遗憾的是我在卸载时总不能完全 ...
- 查询oracle数据库，返回的数据是乱码。 PL/SQL正常。
查询oracle数据库,返回的数据是乱码. PL/SQL正常. 解决方案如下:
- winFrom 常用控件属性及方法介绍
目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichTextBox控件 5.NumericUpDown控件 6.Button(按钮)控件 7.Gro ...
- Flask-RESTful 快速入门
Flask-RESTful 快速入门 hello world from flask import Flask from flask_restful import Resource, Api app = ...