粒子拼字效果（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 ...
随机推荐
- git学习1：git安装和配置
Git是什么?世界上最先进的分布式版本控制系统,记录了一个文本文件的每次一修改信息,比如,一篇散文,从草稿到最终出版,经历过无数次修改,修改了标点符号形成一个版本,老师帮助修改形成一个版本,同学帮忙修 ...
- 每天一个 Linux 命令（22）：find 命令的参数详解
find一些常用参数的一些常用实例和一些具体用法和注意事项. 1．使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用. 可以使用某种文件名模式来匹配 ...
- day8-异常
异常处理 1.异常基础 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户看见大黄页!!! try: pass except Ex ...
- C++设计模式-Command命令模式
Command命令模式作用:将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤销的操作. 由于“行为请求者”与“行为实现者”的紧耦合,使用命令模式 ...
- C++设计模式-Facade模式
Facade模式 作用:为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 动机 将一个系统划分成为若干个子系统有利于降低系统的复杂性.一 ...
- 剑指Offer:面试题30——最小的k个数(java实现)
问题描述: 输入n个整数,找出其中最小的k个数 思路1: 先排序,再取前k个 时间复杂度O(nlogn) 下面给出快排序的代码(基于下面Partition函数的方法) public void Quic ...
- 剑指Offer:面试题29——数组中出现次数超过一半的数字(java实现)
PS:在前几天的面试中,被问到了这个题.然而当时只能用最低效的方法来解. 问题描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2, ...
- Oracle诡异结果调查备忘 - A investigation memo of weird Oracle database search results
最近需要维护一个差不多十多年前开发的ASP.Net程序,遇到了各种奇奇怪怪的问题,把其中比较难查明的问题记录如下: 问题一: 同样的SQL查询在不同服务器上查询结果不同.在QA环境下,结果完全正常,而 ...
- MCV之行为
在Controller中的方法都称为行为,所以的公共方法都可以在浏览器中调用,返回值为:ActionResult的类型或其子类,这个类为抽象类,所以这为抽象编程,方法的结果返回为直接或间接继承自Act ...
- 关于Python3爬虫抓取网页Unicode
import urllib.requestresponse = urllib.request.urlopen('http://www.baidu.com')html = response.read() ...