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