canvas文字粒子效果 html+css+js 3点饮茶,7点放工,美滋滋~
先言:
今天3点多在饮茶的时候,发现有好几天没水文章了,但是太难的玩意又不会啊,咋办,突然想起电脑里还有存着一个文字粒子特效,好家伙,这不就来了,先看效果如下:
因为gif图最大5m,但是这东西演示完又不止5m,所以就用视频演示效果了~
BILINILI视频演示效果》
实现步骤(完整源码放在最后):
1.获取画布
//获取画布var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');
2.绘制基本文字
// 先在画布绘制一串文字,大小可以自己调,我这30px,6个字,大概搞个180px*30px的大小,背景色为黑色ctx.font = "30px fangsong";ctx.fillStyle = "rgb(0, 0, 0)";ctx.fillText("北极光之夜。",0,30,180);
3.获取文字的像素位置等
// getImageData()可以获取画布上指定矩形的像素数据,把那上面文字所在区域的的像素保存起来var pix = ctx.getImageData(0,0,180,35);
getImageData() 复制画布上指定矩形的像素数据。
getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。
对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)
color/alpha 以数组形式存在,并存储于 ImageData 对象的 data 属性中。
4.画布动态适应屏幕大小
// 画布动态适应屏幕大小window.addEventListener('resize',canvasResize);function canvasResize(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;}canvasResize();
5.设置变量
// 这是等会绘制粒子文字的处于窗口大概位置var cx = canvas.width/2-(180*5/2);var cy = canvas.height/2-(35*5/2);
6. 定义 Particle,实现粒子基本信息初始化方法,绘制粒子方法,更新位置方法
//定义一个Particle类class Particle{constructor(){//定义一个数组,存放每个粒子的信息this.arr = [];}//初始化每个粒子信息init(){//循环,像素是以4个数据为一组的for(let i=0;i<pix.data.length/4;i++){this.arr.push({//文字像素本该的处于的水平位置x:i%180,//文字像素本该的处于的垂直位置y:i/180,// 透明度alpha:pix.data[i*4+3],//给个随机水平位置,粒子运动 mx ---》xmx:Math.random()*canvas.width,//给个随机垂直位置,粒子运动 my ---》ymy:Math.random()*canvas.height,//粒子半径radius:Math.random()*3,//粒子速度speed:Math.random()*40+40,//粒子随机颜色color:`rgba(${Math.random()*255},${Math.random()*255},${Math.random()*255},${pix.data[i*4+3]}`})}}//绘制draw(){//遍历arr数组this.arr.forEach(item=>{//下面就是绘制每个小圆了ctx.beginPath();ctx.fillStyle = item.color;ctx.arc(item.mx,item.my,item.radius,0,Math.PI*2,false);ctx.fill();})}//粒子位置更新update(){for(let i=0;i<this.arr.length;i++){//粒子运动 mx ---》x , my ---》y , 采用缓动动画原理//当然,如果粒子移动到原先的位置的话,岂不是太小,就文字就30px大小,所以位置改为x*5+cx,y*5+cythis.arr[i].mx = this.arr[i].mx + ((this.arr[i].x*5+cx)-this.arr[i].mx)/this.arr[i].speed;this.arr[i].my = this.arr[i].my + ((this.arr[i].y*5+cy)-this.arr[i].my)/this.arr[i].speed;}}}
7. new一个 Particle,然后初始化
const particle = new Particle();particle.init();
8.执行粒子运动动画
function step(){ctx.fillStyle = "rgba(0,0,0,0.1)";ctx.fillRect(0,0,canvas.width,canvas.height);particle.draw(); particle.update(); window.requestAnimationFrame(step);}window.requestAnimationFrame(step);
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
9. 窗口大小改变重新初始化:
window.addEventListener('resize',function(){particle.arr = []; particle.init();cx = canvas.width/2-(180*5/2);cy = canvas.height/2-(35*5/2);})
完整代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>北极光之夜。</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{height: 100vh;display: flex;justify-content: center;align-items: center;background-color: rgb(0, 0, 0);}</style>
</head>
<body><canvas id="canvas"></canvas><script>var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.font = "30px fangsong";ctx.fillStyle = "rgb(0, 0, 0)";ctx.fillText("北极光之夜。",0,30,180); var pix = ctx.getImageData(0,0,180,35);window.addEventListener('resize',canvasResize);function canvasResize(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;}canvasResize();var cx = canvas.width/2-(180*5/2);var cy = canvas.height/2-(35*5/2);class Particle{constructor(){this.arr = [];}init(){for(let i=0;i<pix.data.length/4;i++){this.arr.push({x:i%180,y:i/180,alpha:pix.data[i*4+3],mx:Math.random()*canvas.width,my:Math.random()*canvas.height,radius:Math.random()*3,speed:Math.random()*40+40,color:`rgba(${Math.random()*255},${Math.random()*255},${Math.random()*255},${pix.data[i*4+3]}`})}}draw(){ this.arr.forEach(item=>{ctx.beginPath();ctx.fillStyle = item.color;ctx.arc(item.mx,item.my,item.radius,0,Math.PI*2,false);ctx.fill();})}update(){for(let i=0;i<this.arr.length;i++){this.arr[i].mx = this.arr[i].mx + ((this.arr[i].x*5+cx)-this.arr[i].mx)/this.arr[i].speed;this.arr[i].my = this.arr[i].my + ((this.arr[i].y*5+cy)-this.arr[i].my)/this.arr[i].speed;}}} const particle = new Particle();particle.init();window.addEventListener('resize',function(){particle.arr = []; particle.init();cx = canvas.width/2-(180*5/2);cy = canvas.height/2-(35*5/2);})function step(){ctx.fillStyle = "rgba(0,0,0,0.1)";ctx.fillRect(0,0,canvas.width,canvas.height);particle.draw(); particle.update(); window.requestAnimationFrame(step);}window.requestAnimationFrame(step);</script>
</body>
</html>
总结:
大功告成,又可以继续饮茶了,饮到7点放工~
其它文章:
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结(一)
Sass总结笔记
…等等
进我主页看更多~
canvas文字粒子效果 html+css+js 3点饮茶,7点放工,美滋滋~相关推荐
- 文字烟雾效果 html+css+js
先看效果(源码在最后): 网上看到了这个效果,觉得很有趣,所以也实现下,并不难,过程如下: 实现过程: 1.定义p标签: <p class="text"><一个青 ...
- 打字机效果 html+css+js
效果(最后有源码): 实现: 1. 定义标签,文本将写在span标签里,文本先在js的数组存着: <h1><span class="text" ></ ...
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
- canvas小球连线碰撞效果 html+css+js
先看效果(完整代码在底部): canvas小球连线碰撞完整源代码 html+css+js 这是我的B站地址~热烈欢迎 实现(看注释,可一步一步跟着实现): 0:定义标签: <h1>北极光之 ...
- html的window效果,HTML+CSS+JS模仿win10亮度调节效果
HTML+CSS+JS模仿win10亮度调节效果 代码 模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
- 文字图片视差效果 html+css+js
话不多,先看效果: 这是我在网上看到的一外国博主的创意,感觉不错,马上自己也敲了一个,果然不错~ 实现: 1.先定义一段文字,多点,起码能超过浏览器的可视区: <section><p ...
- canvas文字粒子特效
想要实现文字的粒子话,最重要的两点是: 1.需要了解canvas的2d上下文的getImageData方法 getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的 ...
- html中文字描边效果代码,css如何设置文字描边效果?
想要使用CSS给文字添加描边效果,主要有两种方法:使用text-stroke属性或text-shadow属性. 方法1:使用text-shadow属性 text-shadow属性用于向文本添加字体边框 ...
- canvas动画粒子效果分享,可以做背景,超级好看
分享以下效果 复制下一代到你的项目即可 <!DOCTYPE html> <html lang="en"> <head><meta char ...
最新文章
- Pliops XDP(Extreme Data Processor)数据库存储设计的新型加速硬件
- Mongodb python驱动教程
- 运行 命令 linux,Linux基本命令运行
- oracle normal bitmap,深入解析Oracle ASSM结构之Level 1 Bitmap Block
- 普通程序员转型深度学习指南
- [Leedcode][第十题][剑指offer]面试题第[19]题[正则表达式][动态规划][递归][JAVA]
- html输出json对象属性值,用javascript中的HTML元素值构建JSON对象
- select 中添加option的注意
- Nginx源码分析 - 模块的赋值及编号 --- 方便了解nginx模块
- c# 时间格式化为英文_C#格式化英文字母的三种方法
- UWP 全屏与退出全屏
- Flume 的使用场景详解
- 我在蚂蚁金服做后端:那些坚持在一个岗位做八年的人,后来怎么样了?
- 移动聚合支付招商,管道收入享长期分润
- uni-app 文件选择、文件管理器(ios11)
- 怎么判断噎到没噎到_宝宝噎着的表现是什么 宝宝噎着症状
- LQ0142 技能升级【二分】
- 欧几里得扩展欧几里得算法及相关的数学证明
- 位(Bit)与字节(Byte)
- 【poi第九节】poi操作excel 单元格的换行