原生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继承的实现
Oct 24 Javascript
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
实例讲解vue源码架构
Jan 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中实现图片的锐化
2006/10/09 PHP
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
json 定义
2008/06/10 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python代码的打包与发布详解
2014/07/30 Python
Python显示进度条的方法
2014/09/20 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
Django视图类型总结
2021/02/17 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
求职信模板怎么做
2014/01/26 职场文书
英文慰问信
2015/02/14 职场文书