Canvas实现文字散粒子化
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body,html{
font-family:"Microsoft Yahei";
}
#can{
display:block;
margin:0 auto;
}
#wrap{
width:500px;
height:100px;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<canvas id="can" width="1000" height="500">浏览器不支持canvas</canvas>
<div id="wrap">
<input type="text" id="text" value="人决定一切" width="80px"><input type="submit" id="submit">
</div> <script type="text/javascript">
window.onload = function(){
var submitDom = document.getElementById("submit");
var textDom = document.getElementById("text");
var can = document.getElementById("can");
var ctx = can.getContext("2d"); var textVal = "";
var initz = 250;
var thisTIme = null;
var animTime = null;
var grains = []; function initAnimate(){
grains = [];
textVal = textDom.value;
drawText(textVal);
var imgDate = ctx.getImageData(0,0,can.width,can.height);
ctx.clearRect(0,0,can.width , can.height);
for(var i=0;i<imgDate.width;i+=6){
for(var j=0;j<imgDate.height;j+=6){
var index = (j*imgDate.width + i)*4;
if(imgDate.data[index]>128){
var grain = new Grain(i,j,0,3);
grains.push(grain);
}
}
}
animate();
} var lock = true;
var pause = false; /*
this.x = Math.random()*can.width;//x轴坐标
this.y = Math.random()*can.height;//y轴坐标
this.z = Math.random()*initz*2;//z轴坐标
this.ix = Math.random()*can.width;//初始化x轴坐标
this.iy = Math.random()*can.height;//初始化y轴坐标
this.iz = Math.random()*initz*2;//初始化z轴坐标
this.tx = x;//目标x轴坐标
this.ty = y;//目标y轴坐标
this.tz = z;//目标z轴坐标
*/ function animate(){
thisTIme = new Date();
ctx.clearRect(0,0,can.width,can.height);
grains.forEach(function(item){
if(lock){
if(Math.abs(item.tx-item.x)<0.1&&Math.abs(item.ty-item.y)<0.1&&Math.abs(item.tz-item.z)<0.1){
item.x = item.tx;
item.y = item.ty;
item.z = item.tz;
if(thisTIme-animTime>300) lock = false;
} else{
item.x += (item.tx-item.x)*0.1;
item.y += (item.ty-item.y)*0.1;
item.z += (item.tz-item.z)*0.1;
animTime = new Date();
}
}else{
if(Math.abs(item.ix-item.x)<0.1&&Math.abs(item.iy-item.y)<0.1&&Math.abs(item.iz-item.z)<0.1){
item.x = item.ix;
item.y = item.iy;
item.z = item.iz;
pause = true;
console.log("执行完毕！");
} else{
item.x += (item.ix-item.x)*0.1;
item.y += (item.iy-item.y)*0.1;
item.z += (item.iz-item.z)*0.1;
pause = false;
}
}
item.draw();
}) if(!pause) {
if("requestAnimationFrame" in window){
requestAnimationFrame(animate);
}
else if("webkitRequestAnimationFrame" in window){
webkitRequestAnimationFrame(animate);
}
else if("msRequestAnimationFrame" in window){
msRequestAnimationFrame(animate);
}
else if("mozRequestAnimationFrame" in window){
mozRequestAnimationFrame(animate);
}
}
} function Grain(x,y,z,r){
this.x = Math.random()*can.width;//x轴坐标
this.y = Math.random()*can.height;//y轴坐标
this.z = Math.random()*initz*2-initz;//z轴坐标
this.ix = Math.random()*can.width;//初始化x轴坐标
this.iy = Math.random()*can.height;//初始化y轴坐标
this.iz = Math.random()*initz*2-initz;//初始化z轴坐标
this.tx = x;//目标x轴坐标
this.ty = y;//目标y轴坐标
this.tz = 0;
this.r = r;//粒子半径
} Grain.prototype = {
draw : function(){
ctx.save();
ctx.beginPath();
var scale = initz/(initz + this.z);
ctx.fillStyle = "rgba(50,50,50,"+ scale +")";
ctx.arc(can.width/2 + (this.x-can.width/2)*scale , can.height/2 + (this.y-can.height/2) * scale, this.r*scale , 0 , 2*Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
}
} function drawText(text){
ctx.save();
ctx.font = "200px 微软雅黑 bold";
ctx.fillStyle = "rgba(168,168,168,1)";
ctx.textAlign = "center"
ctx.textBaseLine = "middle";
ctx.fillText(text,can.width/2,can.height/2);
ctx.restore();
} submitDom.onclick = function(){
initAnimate();
lock = true;
pause = false;
} initAnimate();
}
</script>
</body>
</html>
效果图：
IT技术和行业交流群 417691667
Canvas实现文字散粒子化的更多相关文章
- 随便谈谈用canvas来实现文字图片粒子化
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 看了岑安大大的教程http://www.cnblogs.com/hongru/archive/2012/03/28/2420415.htm ...
- HTML5 <Canvas>文字粒子化
文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
- Canvas实现文字粒子化，并且绕轴旋转（完善）
1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉. 2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动 a. HTML代码,定义c ...
- PS 软件操作应用处理——粒子化任务效果
前 言 JRedu 上次分享中,给大家介绍了一些图片的处理方法,主要是通过滤镜里的功能,把图片处理成素描效果或者水彩画效果,营造出不同的氛围. PS是一款非常强大的软件,包含了非常多的功能,合成 ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 小程序canvas中文字设置居中锚点
小程序中经常会遇到要生成图片的需求,图片一般会加上用户的头像和昵称之类的,头像只需要把腾讯域名添加到request和download列表中,使用wx.getImageInfo()就可以缓存到本地,成功 ...
- canvas 画布 文字描边
总结一下,canvas 画布 文字描边的2种方法以及其不同的视觉效果: 效果图: 具体代码: <canvas id="canvas" width="800" ...
- 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...
- Canvas实现文字粒子化，并且绕轴旋转（初号机）
写下来发现,程序在细节上处理的很差,比如旋转的时候,在终点处有明显的撞墙感觉,以及小部分粒子存在精度差异,导致撞击后不与整体平衡. 注释全在代码中了,就不多说了,另外感觉写的旋转的规则有点怪,后续再调 ...
随机推荐
- U盘安装Windows 7 + Ubuntu 14 双系统笔记
第一个系统是Windows 7系统,现在采用U盘安装 Ubuntu 14,实现双系统,主要会用到3个软件: 1.DiskGenius - 磁盘修复.分区.调整分区工具,点击下载: 用这个工具先腾出一个 ...
- 第3月第2天 find symbolicatecrash 生产者－消费者 ice 引用计数
1.linux find export find /Applications/Xcode.app/ -name symbolicatecrash -type f export DEVELOPER_DI ...
- 01OC概述
目前来说,Objective-C(简称OC)是iOS开发的核心语言,在开发过程中也会配合着使用C语言.C++,OC主要负责UI界面,C语言.C++可用于图形处理.特点如下: 一.OC基于C语言 C语言 ...
- java后端制作MD5加密
由于一次业务的需要,我制作了一次密码的修改子业务. 当用户忘记密码的情况下,我需要动态的发给他一个6位的随机密码,通过即时通,短信,微信等.并同时修改数据库中的原密码为这6位的随机密码.让用户再去修改 ...
- javascript基础02
javascript基础02 1.数据类型 数据类型的描述在上篇的扩展中有写到链接 由于ECMAScript数据类型具有动态性,因此的确没有再定义其他数据类型的必要.这句话很重要. 如果以后再数据类型 ...
- 进度条ProgressDialog
1.效果图 public void click(View view) { final ProgressDialog pdDialog = new ProgressDialog(this); //设置标 ...
- WCF 定义SOAP和REST风格的webservice
摘抄于其他帖子,在此记录以备后用. 1. 定义服务数据契约(SOAP与REST方式相同) public class Employee { [DataMember] public st ...
- ACM/ICPC 之 卡卡的矩阵旅行-最小费用最大流(可做模板)(POJ3422)
将每个点拆分成原点A与伪点B,A->B有两条单向路(邻接表实现时需要建立一条反向的空边,并保证环路费用和为0),一条残留容量为1,费用为本身的负值(便于计算最短路),另一条残留容量+∞,费用为0 ...
- java.lang.IllegalStateException: getOutputStream() has already been called for this response
ERROR [Engine] StandardWrapperValve[jsp]: Servlet.service() for servlet jsp threw exceptionjava.lang ...
- 设置app的启动图
Step1 1.点击Image.xcassets 进入图片管理,然后右击,弹出"New Launch Image" 2.如图,右侧的勾选可以让你选择是否要对ipad,横屏,竖屏,以 ...