思路：
效果：
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<canvas id="canvas" width="1500px" height="900px" style="border:1px solid black;background:black"></canvas>
<script type="text/javascript">
// 获取canvas对象
var canvas = document.getElementById("canvas");
// 获取上下文
var ctx = canvas.getContext("2d");
// 获取宽度
var width = canvas.width;
// 获取高度
var height = canvas.height;
// 定义雪花构造函数
// 参数 ctx:上下文
function Snowflake(ctx, x, y) {
this.ctx = ctx;
this.x = x;
this.y = y;
// 定义x轴的移动速度
this.speedX = Math.random() * 4 - 2;
// 定义y轴的下落速度
this.speedY = -1;
// 重力加速度
this.gravity = 0.1;
// 雪花半径
this.radius = 5;
// 雪花颜色
this.color = "white";
}
// 给构造函数绑定绘制方法
Snowflake.prototype.draw = function() {
// 开启一条新路径
this.ctx.beginPath();
// 定义填充颜色
this.ctx.fillStyle = this.color;
// 绘制圆形
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
// 绘制
this.ctx.fill();
};
// 给构造函数绑定更新方法
Snowflake.prototype.update = function() {
// x坐标每次增加一个速度值
this.x += this.speedX;
// y坐标的速度每次增加一个重力速度
this.speedY += this.gravity;
// y坐标每次移动加完重力速度后的速度
this.y += this.speedY;
// 雪花半径每次都减少0.03
this.radius -= 0.03;
// 如果半径小于1的话重置半径为1
if (this.radius < 1) {
this.radius = 1
};
// 进行绘制方法
this.draw();
};
// 存放雪花数组
var arr = []
// 开启定时器
setInterval(function() {
// 清空画布
ctx.clearRect(0, 0, width, height);
// 实例化雪花
var snowflake = new Snowflake(ctx, width * Math.random(), 0);
// 把新建的雪花放入数组
arr.push(snowflake);
// 循环更新缓存的雪花
for (var i = 0; i < arr.length; i++) {
arr[i].update();
}
// 当雪花个数超过300时，移除数组的第一个值
if (arr.length > 300) {
arr.shift();
};
}, 16);
</script>
</body>
</html>
烟花效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000px" height="500px" style="border:1px solid black;background:black"></canvas>
<script type="text/javascript">
// 获取canvas对象
var canvas = document.getElementById("canvas");
// 获取上下文
var ctx = canvas.getContext("2d");
// 获取canvas宽度
var width = canvas.width;
// 获取canvas高度
var height = canvas.height;
// 定义烟花构造函数
function FireWorks(ctx, x, y) {
// 画布上下文
this.ctx = ctx;
this.x = x;
this.y = y;
// x轴坐标速度
this.speedX = Math.random() * 4 - 2;
// y轴坐标速度
this.speedY = Math.random() * 2 - 13;
// 加速度
this.acceleration = 0.2;
// 烟花半径
this.radius = 5;
// 烟花颜色
this.color = "white";
// 绘制
this.draw();
};
// 烟花的绘制方法
FireWorks.prototype.draw = function() {
// 开始一条新路径
this.ctx.beginPath();
// 填充颜色
this.ctx.fillStyle = this.color;
// 绘制烟花
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
// 绘制
this.ctx.fill();
}
// 烟花的更新方法
FireWorks.prototype.update = function() {
// x坐标每次增加一个speedX
this.x += this.speedX;
// y坐标速度每次加上一个加速度
this.speedY += this.acceleration;
this.y += this.speedY;
// y坐标速度为正数时，代表烟花正在下落
// y坐标速度为负数时，代表烟花正在上升
if (this.speedY > 0) {
// 半径逐渐减小
this.radius -= 0.2;
// 当半径小于1时就设置为1
if (this.radius < 1) {
this.radius = 1;
}
} else {
// 当烟花正在上升时，逐渐变大
this.radius += 0.2;
// 当烟花大于10时，就设置为10
if (this.radius > 10) {
this.radius = 10;
}
}
// 进行绘制
this.draw();
}
// 定义烟花数组
var arr = [];
// 开启定时器
setInterval(function() {
// 清空画布
ctx.clearRect(0, 0, width, height);
// 创建烟花实例
var fireWorks = new FireWorks(ctx, width / 2, height - 30);
// 放入数组
arr.push(fireWorks);
// 循环烟花数组，调用烟花的更新方法
for (var i = 0; i < arr.length; i++) {
arr[i].update();
}
// 如果数组长度大于100，则删除数组第一项
if (arr.length > 100) {
arr.shift();
}
}, 15);
</script>
</body>
</html>
