JavaScript利用Canvas实现粒子动画倒计时
作者:蜡笔小心_ 时间:2024-04-16 09:37:52
canvas 粒子动画介绍
何为canvas
canvas是HTML5中新增的一个标签,主要是用于网页实时生成图像并可操作图像,它是用JavaScript操作的bitmap。
粒子动画是啥
粒子动画就是页面上通过发射许多微小粒子来表示不规则模糊物体,比如:用小圆点来模拟下雪、下雨的效果,用模糊线条模拟黑客帝国背景效果等。
canvas
新建一个HTML文件,写入canvas标签用于后续展示倒计时
<canvas id="canvas-number"></canvas>
<canvas id="canvas-dots"></canvas>
canvas-number 是用于倒计时数字展示
canvas-dots 是用于全屏粒子动画展示
加点样式效果看看吧
body {
background-color: #24282f;
margin: 0;
padding: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
#canvas-number {
width: 680px;
height: 420px;
}
主要是定义了 canvas-number
画布大小,canvas-dots
画布大小会在JavaScript中定义
定义初始变量
在JavaScript中定义所需的变量
var numberStage,
numberStageCtx,
numberStageWidth = 680,
numberStageHeight = 420,
numberOffsetX,
numberOffsetY,
stage,
stageCtx,
stageWidth = window.innerWidth,
stageHeight = window.innerHeight,
stageCenterX = stageWidth / 2,
stageCenterY = stageHeight / 2,
countdownFrom = 3,
countdownTimer = 2800,
countdownRunning = true,
number,
dots = [],
numberPixelCoordinates,
circleRadius = 2,
colors = ['61, 207, 236', '255, 244, 174', '255, 211, 218', '151, 211, 226'];
numberStage - stageCenterY 这一块主要是定义画布宽高和坐标
countdownFrom 从 10 开始倒计时
countdownTimer 数字显示的时长
countdownRunning 动起来
colors 页面上所有粒子颜色
其他的可以自己理解一下哦~
初始化canvas和数字文本
创建一个init
函数,里面会包裹初始化内容
function init() {
// 初始化canvas-number
numberStage = document.getElementById("canvas-number");
numberStageCtx = numberStage.getContext('2d');
// 设置文字文本的窗口大小
numberStage.width = numberStageWidth;
numberStage.height = numberStageHeight;
// 初始化canvas-dots和窗口大小
stage = document.getElementById("canvas-dots");
stageCtx = stage.getContext('2d');
stage.width = stageWidth;
stage.height = stageHeight;
// 设置一定的偏移量,让文字居中
numberOffsetX = (stageWidth - numberStageWidth) / 2;
numberOffsetY = (stageHeight - numberStageHeight) / 2;
}
根据代码中的注释可以了解初始化的内容哦~
初始化完成之后,我们需要直接运行方法
init();
在init
函数结束之后,马上就需要运行该函数了
创建一定数量的点
for (var i = 0; i < 2240; i++) {
var dot = new Dot(randomNumber(0, stageWidth), randomNumber(0, stageHeight), colors[randomNumber(1, colors.length)], .3);
dots.push(dot);
tweenDots(dot, '', 'space');
}
循环创建点,这里循环给的是个固定数据
new Dot 是创建点对象的方法
tweenDots 是让点动起来的第三方js
function Dot(x, y, color, alpha) {
var _this = this;
_this.x = x;
_this.y = y;
_this.color = color;
_this.alpha = alpha;
this.draw = function () {
stageCtx.beginPath();
stageCtx.arc(_this.x, _this.y, circleRadius, 0, 2 * Math.PI, false);
stageCtx.fillStyle = 'rgba(' + _this.color + ', ' + _this.alpha + ')';
stageCtx.fill();
}
}
通过 x、y坐标定位点
通过随机颜色,让点样式更丰富
draw 里面的内容都是canvas画图的方法,具体可参考canvas文档
倒计时
function countdown() {
// 发送倒计时数字
drawNumber(countdownFrom.toString());
// 倒计时为 0 时停止
if (countdownFrom === 0) {
countdownRunning = false;
drawNumber('蜡笔小心');
}
countdownFrom--;
}
倒计时结束之后,就可以想干啥干啥了,这里我重新输出了额外的文字
countdownFrom 需要做递减的操作
countdown();
我们需要在页面进入时,直接触发倒计时函数
倒计时文本绘画
每一个倒计时都需要用不同的点去绘制
这里通过循环 让每个文本都有四种颜色绘制
function drawNumber(num) {
numberStageCtx.clearRect(0, 0, numberStageWidth, numberStageHeight);
numberStageCtx.fillStyle = "#24282f";
numberStageCtx.textAlign = 'center';
numberStageCtx.font = "bold 118px Lato";
numberStageCtx.fillText(num, 250, 300);
var ctx = document.getElementById('canvas-number').getContext('2d');
var imageData = ctx.getImageData(0, 0, numberStageWidth, numberStageHeight).data;
numberPixelCoordinates = [];
for (var i = imageData.length; i >= 0; i -= 4) {
if (imageData[i] !== 0) {
var x = (i / 4) % numberStageWidth;
var y = Math.floor(Math.floor(i / numberStageWidth) / 4);
if ((x && x % (circleRadius * 2 + 3) == 0) && (y && y % (circleRadius * 2 + 3) == 0)) {
numberPixelCoordinates.push({
x: x,
y: y
});
}
}
}
formNumber();
}
function formNumber() {
for (var i = 0; i < numberPixelCoordinates.length; i++) {
tweenDots(dots[i], numberPixelCoordinates[i], '');
}
if (countdownRunning && countdownFrom > 0) {
setTimeout(function () {
breakNumber();
}, countdownTimer);
}
}
function breakNumber() {
for (var i = 0; i < numberPixelCoordinates.length; i++) {
tweenDots(dots[i], '', 'space');
}
if (countdownRunning) {
setTimeout(function () {
countdown();
}, countdownTimer);
}
}
循环绘制
function loop() {
stageCtx.clearRect(0, 0, stageWidth, stageHeight);
for (var i = 0; i < dots.length; i++) {
dots[i].draw(stageCtx);
}
requestAnimationFrame(loop);
}
loop();
循环绘制,需要进入页面即执行,所以在方法之后马上执行该函数
点动画
在倒计时文本中,我们一直会调用tweenDots
方法,就是用于点动画效果的绘制
function tweenDots(dot, pos, type) {
if (type === 'space') {
TweenMax.to(dot, (3 + Math.round(Math.random() * 100) / 100), {
x: randomNumber(0, stageWidth),
y: randomNumber(0, stageHeight),
alpha: 0.3,
ease: Cubic.easeInOut,
onComplete: function () {
tweenDots(dot, '', 'space');
}
});
} else {
TweenMax.to(dot, (1.5 + Math.round(Math.random() * 100) / 100), {
x: (pos.x + numberOffsetX),
y: (pos.y + numberOffsetY),
delay: 0,
alpha: 1,
ease: Cubic.easeInOut,
onComplete: function () {}
});
}
}
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
随机移动画布周围的点
让点和文本内容协调展示
效果图
来源:https://juejin.cn/post/7173487087961210911
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
讲解数据库管理系统必须提供的基本服务
在sql中返回插入的记录的id
Python中fnmatch模块的使用详情
python绘制简单折线图代码示例
![](https://img.aspxhome.com/file/2023/4/99074_0s.jpg)
appium+python adb常用命令分享
![](https://img.aspxhome.com/file/2023/7/80537_0s.jpg)
Python3自动签到 定时任务 判断节假日的实例
Python调用腾讯API实现人脸身份证比对功能
![](https://img.aspxhome.com/file/2023/8/117908_0s.jpg)
Go事务中止时是否真的结束事务解析
pandas to_excel 添加颜色操作
在Python3中初学者应会的一些基本的提升效率的小技巧
使用python将微信image下.dat文件解密为.png的方法
![](https://img.aspxhome.com/file/2023/1/134991_0s.png)
基于python pygame实现的兔子吃月饼小游戏
![](https://img.aspxhome.com/file/2023/5/95865_0s.png)
怎么写好一份图形界面设计师简历
方便和实用
Python深度学习神经网络基本原理
![](https://img.aspxhome.com/file/2023/5/133885_0s.png)
SQL Server查找表名或列名中包含空格的表和列实例代码
![](https://img.aspxhome.com/file/2023/5/119205_0s.png)
asp 快钱网关接口 支付宝接口 财付通接口代码
pip如何用pipdeptree查看包依赖
![](https://img.aspxhome.com/file/2023/7/107817_0s.jpg)