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实现文字粒子化，并且绕轴旋转（初号机）
写下来发现,程序在细节上处理的很差,比如旋转的时候,在终点处有明显的撞墙感觉,以及小部分粒子存在精度差异,导致撞击后不与整体平衡. 注释全在代码中了,就不多说了,另外感觉写的旋转的规则有点怪,后续再调 ...
随机推荐
- 项目里面的某个.m文件无法使用
- 检查:Build Phases -> Compile Sources
- 什么是Reactor模式，或者叫反应器模式
Reactor这个词译成汉语还真没有什么合适的,很多地方叫反应器模式,但更多好像就直接叫reactor模式了,其实我觉着叫应答者模式更好理解一些.通过了解,这个模式更像一个侍卫,一直在等待你的召唤,或 ...
- Sublime Text3中Autoprefixer失效解决方法
进入CSS文件,默认配置在按下快捷键(Ctrl+Shift+P)后输入Autoprefix,你会发觉它什么事也没干,然后--这什么鬼?抓狂ing-- 原来是因为这玩意还要配置下,以下为配置方法: Pr ...
- Python递归及斐波那契数列
递归函数 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数.举个例子,我们来计算阶乘 n! = 1 * 2 * 3 * ... * n,用函数 fact(n)表示,可 ...
- selenium+testng+ant+jenkins 手记
会不会搭建测试平台是一般测试工程师和高级测试工程师分水岭 ----tobecrazy 我们项目有现成的测试平台,使用的是selenium grid+testng+ant+jenkins+VM 但是我平 ...
- Magento 新增字段的值读写丢失原因
某实体新增字段handreturn_status,欲操作之: $order_info = Mage::getModel('sales/order')->load($order_id); //se ...
- JavaScript高级程序设计学习笔记--错误处理与调试
try-catch语句 只要代码中包含finally子句,则无论try或catch语句块中包含什么代码--甚至return语句,都不会阻止finally子句的执行,来看下面这个函数: function ...
- node05-fs
目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...
- [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示
今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...
- 简单Java算法程序实现！斐波那契数列函数~
java编程基础--斐波那契数列 问题描述:一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 思路:可能出现的情况:(1) n=1 ,一种方法 ;(2)n=2 ...