原生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 相关文章推荐
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
jquery实现手风琴案例
May 04 jQuery
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
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
PHP反向代理类代码
2014/08/15 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
php微信开发之谷歌测距
2018/06/14 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python进阶学习之特殊方法实例详析
2017/12/01 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python list多级排序知识点总结
2019/10/23 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python3如何判断三角形的类型
2020/04/12 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
.NET面试问题集
2015/12/08 面试题
总经理工作职责范文
2014/03/14 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
放飞理想演讲稿
2014/09/09 职场文书
四大名著读书笔记
2015/06/25 职场文书