原生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写一个可以自动隐藏的悬浮框
Mar 05 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
详解如何使用webpack打包JS
2018/06/21 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
使用Python绘制图表大全总结
2017/02/11 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
什么是Assembly(程序集)
2014/09/14 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
便利店投资创业计划书
2014/02/08 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
环卫处个人工作总结
2015/03/04 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
springcloud整合seata
2022/05/20 Java/Android