前言
实现canvas雪夜下雪效果
- 1、设置canvas标签的id为cvs，设置背景颜色为黑色
- 2、设置body外边距为0
- 3、通过获取DOM元素获得画板
- 4、指定二维绘图
- 5、设置宽高填满页面
- 6、设置雪点的颜色
- 7、定义一个雪点数据
- 8、定义一个下雪函数
- 9、调用下雨函数
二、完整代码及运行效果
- 完整代码
- 运行结果![在这里插入图片描述](https://img-blog.csdnimg.cn/1d4df5ec497449b5acc035353e738f03.gif#pic_center)

前言

<canvas>是HTML 5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。

实现canvas雪夜下雪效果

1、设置canvas标签的id为cvs，设置背景颜色为黑色

<canvas id="cvs" style="background-color: #000;"></canvas>

2、设置body外边距为0

<body style="margin: 0;">

3、通过获取DOM元素获得画板

// 获取面版const cvs = document.querySelector("#cvs");

4、指定二维绘图

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
getContext(‘2d’)：它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

const ctx = cvs.getContext('2d');

5、设置宽高填满页面

// 取出屏幕的宽高
const {clientWidth:width,clientHeight:height} = document.documentElement;
// 重设canvas的宽高
cvs.width =width;
cvs.height =height;

6、设置雪点的颜色

ctx.fillStyle='#ffffff';

7、定义一个雪点数据

设置雪点个数为500个

const bgColors = Array.from(new Array(500)).map(v=>{return {x:Math.random()*width,  // 在宽度范围内随机y:Math.random()*height, // 在高度范围内随机step:Math.random()*2.5+0.5, // 运动速度随机}
})

8、定义一个下雪函数

函数内部：requestAnimationFrame()高频执行 → clearRect()清除画布 → beginPath()重新绘图的准备 → forEach遍历雪点 → fill()重设矩形 → fill()渲染 → 往下飘

const render = ()=>{// 2.清空ctx.clearRect(0,0,width,height);// 3.重新绘图的标识ctx.beginPath();// 4.遍历bgColors.forEach(v=>{// 7.往下飘的效果v.y = v.y > height?0:(v.y+v.step)// 5.重设一个矩形ctx.rect(v.x,v.y,3,3)})// 6.渲染ctx.fill();//  1.requestAnimationFrame制作高频执行requestAnimationFrame(render);}

9、调用下雨函数

render();

二、完整代码及运行效果

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title>
</head>
<body style="margin: 0;"><canvas id="cvs" style="background-color: #000;"></canvas>
</body>
<script>const cvs = document.querySelector("#cvs");const ctx = cvs.getContext('2d');// 取出屏幕的宽高const {clientWidth:width,clientHeight:height} = document.documentElement;// 重设canvas的宽高cvs.width =width;cvs.height =height;// 设置雪点的颜色ctx.fillStyle='#ffffff';// 定义雪点的数组// 设置雪点个数为400个const bgColors = Array.from(new Array(400)).map(v=>{return {x:Math.random()*width,  // 在宽度范围内随机y:Math.random()*height, // 在高度范围内随机step:Math.random()*2.5+0.5, // 运动速度随机}})// 定义render函数const render = ()=>{// 清空ctx.clearRect(0,0,width,height);// 重新开始ctx.beginPath();// 遍历bgColors.forEach(v=>{// 往下飘的效果v.y = v.y>height?0:(v.y+v.step)// 重设ctx.rect(v.x,v.y,3,3)})// 渲染ctx.fill();//  requestAnimationFrame制作高频执行requestAnimationFrame(render);}// 调用render()函数render()
</script>
</html>

运行结果

20多行js实现canvas雪夜下雪效果相关推荐

原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
Canvas编程练习：20几行js代码实现雷达扫描动画效果
灵感源于一不小心挖了一个陈年老贴etherdream发的<[分享]魔兽技能冷却效果(希望能有更好的思路)>的坟,看他的代码太长(约200行),于是自己动手写了一个,也就20多行代码,效果也 ...
HTML5+CSS3+JS实现满屏下雪效果
效果图: 全部代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
three.js打造酷炫下雪效果
代码: <!doctype html> <html><head><meta charset="UTF-8"><meta nam ...
php公告滚动源码,10行js代码实现上下滚动公告效果方法
本文主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧.希望能帮助到大家 ...
canvas下雪效果(原生js)
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
canvas冬天下雪js特效代码
下载地址 canvas冬天下雪特效代码 dd:
登顶 GitHub 趋势榜，标星1.8k：200 行 JS 代码让画面人物瞬间消失！
整理 | 夕颜出品 | CSDN(ID:CSDNnews) 今天,一个名为 Real-Time-Person-Removal(实时人物去除)项目在GitHub上火了,登上近日GitHub Trend ...
画线标记html,markline.js——轻量级canvas绘制标记线的库
这段时间要做的是一个数据可视化的小型项目.其中最基本要求是实现两点之间的迁徙关系(比如同一个用户不同时间上网的地点)用一条有向线段(markline)联系在一起.很自然的我一开始想的就是采用百度的ec ...

20多行js实现canvas雪夜下雪效果

目录

前言