原生js+canvas实现下雪效果


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了js+canvas实现下雪效果的具体代码,供大家参考,具体内容如下

效果展示:

原生js+canvas实现下雪效果

源码展示:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>canvas下雪效果(原生js)</title>
 <style>
 * {
  margin: 0;
  padding: 0
 }
 
 html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #222;
 }
 
 #canvas {
  position: absolute;
  top: 0;
  left: 0;
 }
 </style>
</head>
<body>
<canvas id="canvas"></canvas>
<img id="imgSnow" width="0" height="0" src="xh.png" alt="雪花">
<img id="bgSnow" width="100%" height="100%" src="bj.jpg" alt="背景">
 
<script>
 window.onload = function () {
 var canvas = document.getElementById("canvas");
 var imgSnow = document.getElementById("imgSnow");
 var bgSnow = document.getElementById("bgSnow");
 var ctx = canvas.getContext('2d');
 
 var mbody = document.querySelector("body");
 
 canvas.width =mbody.offsetWidth;
 canvas.height = mbody.offsetHeight;
 
 var GetRandomNum = function (Min, Max) {
  var Range = Max - Min;
  var Rand = Math.random();
  return (Min + Math.round(Rand * Range));
 }
 
 // console.log(GetRandomNum(0, canvas.width))
 
 var snowArray = {}; //雪花对象
 var snowIndex = 0; //标识符
 var setting = {
  num: 30, //数量
  snowSize: 20, //大小
  startX: Math.random() * canvas.width, //起始横坐标
  startY: 0, //起始纵坐标
  vy: 0.01
 }
 
 function snow() {
  // 起始横坐标
  this.x = Math.random() * canvas.width;
  // 起始纵坐标
  this.y = setting.startY;
  this.size = setting.snowSize + Math.random() * 10 - 10;
 
  //横坐标偏移量
  this.vx = Math.random() * 3 - 2; //偏移量
  //纵坐标偏移量
  this.vy = Math.random() * 10;
 
  this.life = 0;
  this.maxLife = 100;
  this.id = snowIndex;
  //当前信息保存至对象snowArray
  snowArray[snowIndex] = this;
 
  snowIndex++;
 }
 
 snow.prototype.draw = function () {
  this.x += this.vx;
  this.y += this.vy;
  this.vy += setting.vy;
  this.life++;
 
  //删除
  if (this.y > canvas.height * 0.9 - 20) {
  snowArray[this.id]
  } else if (this.life >= this.maxLife) {
  snowArray[this.id]
  }
  ctx.drawImage(imgSnow, this.x, this.y, this.size, this.size)
 }
 
 setInterval(function () {
  ctx.drawImage(bgSnow, 0, 0, canvas.width, canvas.height);
 
  //数
  for (var i = 0; i < setting.num; i++) {
  if (Math.random() > 0.97) {
   new snow();
  }
  }
 
  for (var i in snowArray) {
  snowArray[i].draw();
  }
 
 }, 100)202082104246954
 }
</script>
 
</body>
</html>

图片:

原生js+canvas实现下雪效果

雪花:

原生js+canvas实现下雪效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
JavaScript实现动态生成表格
Aug 02 #Javascript
javascript实现京东登录显示隐藏密码
Aug 02 #Javascript
Vue scoped及deep使用方法解析
Aug 01 #Javascript
Vue中computed及watch区别实例解析
Aug 01 #Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 #Javascript
You might like
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
解析isset与is_null的区别
2013/08/09 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python的Django框架中的Context使用
2015/07/15 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
2014年公司迎新年活动方案
2014/02/24 职场文书
廉洁校园实施方案
2014/05/25 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
建党伟业的观后感
2015/06/01 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang