用canvas画一个炫酷的粒子动画倒计时

前言

😆 这是一篇踩在活动尾声的文章，主要是之前在摸鱼社群里有人发了个粒子动画的特效视频，想着研究研究写一篇文章出来看看，结果这一下子就研究了半个多月。

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,countdownRun