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实现文字粒子化，并且绕轴旋转（初号机）
写下来发现,程序在细节上处理的很差,比如旋转的时候,在终点处有明显的撞墙感觉,以及小部分粒子存在精度差异,导致撞击后不与整体平衡. 注释全在代码中了,就不多说了,另外感觉写的旋转的规则有点怪,后续再调 ...
随机推荐
- PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件
ctrl+alt+s ->File Watchers->add-> 其中Argument中的-x代表最后编译过后的css文件为压缩过的 此时就可以用了,但是编译过后less可以自动上 ...
- springMVC接收参数的几种方式
Spring3 MVC请求参数获取的几种方法 一. 通过@PathVariabl获取路径中的参数 @RequestMapping(value="user/{id}/{name}&q ...
- Host文件设置
地址:C:\Windows\System32\drivers\etc 可以在注释语句前加入 "#" hosts文件是Windows系统中一个负责IP地址与域名快递解析的文件,以AS ...
- python初学杂记
python常用命令: 1.python 或者 python3 打开交互式python解释器 2.python hello.py 通过命令提示符运行python脚本 交互式python解释器常用 ...
- Jetty使用教程（四：23）—Jetty开发指南
二十三.Maven和Jetty 这一章节将说明如何通过Maven管理Jetty和使用Jetty的Maven插件. 23.1 使用Maven Apache Maven是一个款软件项目管理工具.基于项目对 ...
- Git版本控制管理学习笔记1-介绍
几乎所有的版本控制工具都是出于同样的目的:开发以及维护开发出来的代码,方便读取代码的历史,记录所有的修改.这里,介绍的是当前在开源社区内非常流行的版本控制工具Git.它是由Linus Torvalds ...
- Win10 UI入门窗口由默认500px to 320px
https://code.msdn.microsoft.com/Layout-for-windows-that-ba648e1c/ https://msdn.microsoft.com/library ...
- Android 配置问题
安装好后需要更新
- (一)安卓小app开发之基础环境搭建
一.准备工作: 1.下载Android Studio开发环境 https://dl.google.com/dl/android/studio/ide-zips/2.1.1.0/android-stud ...
- post NSURLConnection请求网络数据
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...