首先先来看下效果图：
这里我们需要用到的技术有css,html,js,主要还是js部分实现雪花飘落效果。（整体代码在最下面）
HTML部分
html部分只用使用画布canvas就可以了,canvas（画布）是在HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图。
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<canvas></canvas>
</body>
</html>CSS部分
css部分我只加了一张背景图片，当然，css样式不要也可以，看自己的选择。
<style>
*{
margin: 0;
padding: 0;
}
body{
background-image:url(./img/4.jpg);
background-size: cover;
}
</style>js部分
第一步：设置画布
首先就是先获取画布，为了方便，我们可以先写上画布提示，这样你打几个字它就会出现提示，，非常方便。
画布出来了，还需要一支笔来写东西,根据画布定义一支笔，使用getContext()方法。getContext()返回一个对象，提供了用于在画布上绘图的方法和属性。context被称为绘图环境对象，包含绘图的上下文环境,接受两个值：2d和3d。
之后就是设置画布的大小，这里我用的是window的宽高，然后把window的宽高赋值给画布。
// h5画布提示
/** @type{HTMLCanvasElement}*/
// 获取画布
var canvas = document.getElementsByTagName('canvas')[0]
var context = canvas.getContext('2d')
// 设置画布大小 window的宽度和高度用两个变量存起来
var w = window.innerWidth;
var h = window.innerHeight;
// 把变量赋值给画布的宽度和高度，现在画布的的大小就是窗口的大小
canvas.width = w;
canvas.height = h;第二步：设置雪花基本信息
画布设置完成了，现在就来设置雪花了。
// 雪花的基本信息
// 存放雪花数量,数量自己选择
var num = 400;
// 定义空数组，存放雪花的信息，比如半径，位置等
var snows = []
for(var i = 0;i < num;i++){
//push():在数组末尾添加一个或多个数据
snows.push({
// 存放雪花坐标
//使用随机数*window的宽高，这样雪花就只会在这个宽高中
x:Math.random() * w,
y:Math.random() * h,
// 雪花的半径 半径越大雪花越大
r:Math.random() * 5 +1,
})
}第三步：把雪花画到画布上面
现在我们设置了画布，也设置好了雪花，但是还没有把雪花画到画布上面，接下来就实现在画布上面看到雪花。
// draw函数，把雪花画到画布上面
var draw = () => {
// 先清除画布上的东西 clearRect();清空给定矩形内的指定像素。
// 假如已经有了上一次画的东西，需要先清除在把雪花画上去
context.clearRect(0,0,w,h)
//beginPath:开始一条新的路径（路径开始点）
context.beginPath();
// fillStyle:设置填充绘画的颜色
context.fillStyle = 'rgb(255,255,255)'
//shadowColor 属性设置或返回用于阴影的颜色,
//将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。
context.shadowColor = 'rgb(255,255,255)'
// 表示模糊等级
context.shadowBlur = 4;
// 画雪花
for(var i = 0;i < num;i++){
var snow = snows[i];
// 雪花xy坐标
//用于创建新的子路径，并规定其起始点为（x,y）
context.moveTo(snow.x,snow.y);
// 圆 arc()方法创建圆或部分圆
context.arc(snow.x,snow.y,snow.r,0,Math.PI*2);
}
//fill()方法:填充绘图，默认颜色是黑色；若路径未关闭，则fill()方法自动从路径结束点到开始点间添加一条线，以关闭该路径，然后填充颜色。
context.fill();
// 关闭，结束画画的步骤
// closePath:创建从当前点到开始点的路径（路径结束点）, 关闭一条打开的子路径。
context.closePath();第四步：实现雪花飘落效果
现在雪花可以在画布上看到了，但是它还是静态的，所以要让它动起来，这里需要用到运动函数和定时器。
// 雪花飘落的运动函数
var move = () => {
for(var i = 0;i < num;i++){
var snow = snows[i];
// 要让雪花动起来就是要修改雪花的位置，也就是x,y
// 随机数 可以自己调
snow.x += Math.random()*2 + 1;
snow.y += Math.random()*2 + 1;
// 控制边界问题，防止溢出
// 如果雪花的x大于窗口的x,就把x设为0，同理，y也一样
if(snow.x > w){
// 把x设为0
snow.x = 0
}
if(snow.y > h){
snow.y = 0
}
}
}// 在draw()函数里面执行运动函数
move();
// 在draw()外面执行函数
draw()
// 在加一个定时器，这样雪花就实现自动飘落了
// 每隔30毫秒执行一次
setInterval(draw,30)这样，雪花自动飘落效果就完成了。
总体代码如下：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-image:url(./img/4.jpg);
background-size: cover;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
// h5画布提示
/** @type{HTMLCanvasElement}*/
// 获取画布
var canvas = document.getElementsByTagName('canvas')[0]
var context = canvas.getContext('2d')
// 设置画布大小 window的宽度和高度用两个变量存起来
var w = window.innerWidth;
var h = window.innerHeight;
// 把变量赋值给画布的宽度和高度，现在画布的的大小就是窗口的大小
canvas.width = w;
canvas.height = h;
// 雪花的基本信息
// 存放雪花数量
var num = 400;
// 定义空数组，存放雪花的信息，比如半径，位置等
var snows = []
for(var i = 0;i < num;i++){
//push():在数组末尾添加一个或多个数据
snows.push({
// 存放雪花坐标 使用随机数*window的宽度，这样雪花就只会在这个宽度中
x:Math.random() * w,
y:Math.random() * h,
// 雪花的半径 半径越大雪花越大
r:Math.random() * 5 +1,
})
}
// 雪花飘落的运动函数
var move = () => {
for(var i = 0;i < num;i++){
var snow = snows[i];
// 要让雪花动起来就是要修改雪花的位置，也就是x,y
// 随机数 可以自己调
snow.x += Math.random()*2 + 1;
snow.y += Math.random()*2 + 1;
// 控制边界问题，防止溢出
// 如果雪花的x大于窗口的x
if(snow.x > w){
// 把x设为0
snow.x = 0
}
if(snow.y > h){
snow.y = 0
}
}
}
// draw函数，把雪花画到画布上面
var draw = () => {
context.clearRect(0,0,w,h)
//beginPath:开始一条新的路径（路径开始点）
context.beginPath();
// fillStyle:设置填充绘画的颜色
context.fillStyle = 'rgb(255,255,255)'
context.shadowColor = 'rgb(255,255,255)'
// 表示模糊等级
context.shadowBlur = 4;
// 画雪花
for(var i = 0;i < num;i++){
var snow = snows[i];
context.moveTo(snow.x,snow.y);
// 圆 arc()方法创建圆或部分圆
context.arc(snow.x,snow.y,snow.r,0,Math.PI*2);
}
context.fill();
// 关闭，结束画画的步骤
context.closePath();
// 执行运动函数
move();
}
// 执行函数
draw()
// 在加一个定时器，这样雪花就实现自动飘落了
// 每隔30毫秒执行一次
setInterval(draw,30)
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
