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实现文字粒子化，并且绕轴旋转（初号机）
写下来发现,程序在细节上处理的很差,比如旋转的时候,在终点处有明显的撞墙感觉,以及小部分粒子存在精度差异,导致撞击后不与整体平衡. 注释全在代码中了,就不多说了,另外感觉写的旋转的规则有点怪,后续再调 ...
随机推荐
- /etc/rc.d/rc与/etc/rc.d/init.d的关系
在这里先解释一下 /etc/rc.d/init.d 里面放的都是什么东西.这个目录存放的是一些脚本,一般是Linux以rpm包安装时设定的一些服务的启动/关闭脚本.系统在安装时装了好多rpm包,这里面 ...
- 第2月第5天 arc invocation getReturnValue
http://blog.csdn.net/zengconggen/article/details/38024625
- 分布式中Redis实现Session终结篇
上一篇使用Redis实现Session共享方式虽然可行,但是实际操作起来却很麻烦,现有代码已经是这个样子了,总不可能全部换掉吧!好吧,这是个很实际的问题,那么能不能实现无侵入式的分布式Session共 ...
- 用Canvas写桌球游戏！！！
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 昨天上班的时候闲着无事,就用Canvas写了个桌球游戏来玩玩....所以就拿这游戏上来水一发.或许对一些刚学canvas的人有帮助. 话说 ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- CentOS7中禁用IPV6
helps from: https://linux.cn/article-4935-1.html vi /etc/sysctl.conf net.ipv6.conf.all.disable_ipv6 ...
- mac mysql cmd
sudo /usr/local/mysql/support-files/mysql.server start sudo /usr/local/mysql/support-files/mysql.ser ...
- POJ推荐50题
此文来自北京邮电大学ACM-ICPC集训队 此50题在本博客均有代码,可以在左侧的搜索框中搜索题号查看代码. 以下是原文: POJ推荐50题1.标记“难”和“稍难”的题目可以看看,思考一下,不做要求, ...
- C/C++:C++中static，extern和extern "C"关键字
1. extern 变量 extern 表明该变量在别的地方已经定义过了,在这里要使用那个变量. 当extern不与"C"在一起修饰变量或函数时,如在头文件中: extern in ...
- 解决SprngMVC中ResponseBody注解中文乱码
配置文件前面加入如下结构,版本号3.2.5 <bean class="org.springframework.web.servlet.mvc.method.annotation.Req ...