原生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文件缓存之版本管理详解
Jul 05 Javascript
javascript实现yield的方法
Nov 06 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
node.js调用C++函数的方法示例
Sep 21 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
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+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python如何定义带参数的装饰器
2018/03/20 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
求职信范文怎么写
2014/01/29 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
小学生作文评语
2014/04/18 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
新郎结婚感言
2015/07/31 职场文书
提档介绍信范文
2015/10/22 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
八年级作文之友情
2019/11/25 职场文书
JS setTimeout与setInterval的区别
2022/04/20 Javascript