原生JS实现的雪花飘落动画效果


Posted in Javascript onMay 03, 2018

本文实例讲述了原生JS实现的雪花飘落动画效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>3water.com JS下雪动画</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
  .masthead {
    background-color:#333;
    display:block;
    width:100%;
    height:400px;
  }
</style>
<body>
<div class="masthead"></div>
<script>
  (function () {
    var COUNT = 300;
    var masthead = document.querySelector('.masthead');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var width = masthead.clientWidth;
    var height = masthead.clientHeight;
    var i = 0;
    var active = false;
    function onResize() {
      width = masthead.clientWidth;
      height = masthead.clientHeight;
      canvas.width = width;
      canvas.height = height;
      ctx.fillStyle = '#FFF';
      var wasActive = active;
      active = width > 600;
      if (!wasActive && active)
        requestAnimFrame(update);
    }
    var Snowflake = function () {
      this.x = 0;
      this.y = 0;
      this.vy = 0;
      this.vx = 0;
      this.r = 0;
      this.reset();
    };
    Snowflake.prototype.reset = function() {
      this.x = Math.random() * width;
      this.y = Math.random() * -height;
      this.vy = 1 + Math.random() * 3;
      this.vx = 0.5 - Math.random();
      this.r = 1 + Math.random() * 2;
      this.o = 0.5 + Math.random() * 0.5;
    };
    canvas.style.position = 'absolute';
    canvas.style.left = canvas.style.top = '0';
    var snowflakes = [], snowflake;
    for (i = 0; i < COUNT; i++) {
      snowflake = new Snowflake();
      snowflakes.push(snowflake);
    }
    function update() {
      ctx.clearRect(0, 0, width, height);
      if (!active)
        return;
      for (i = 0; i < COUNT; i++) {
        snowflake = snowflakes[i];
        snowflake.y += snowflake.vy;
        snowflake.x += snowflake.vx;
        ctx.globalAlpha = snowflake.o;
        ctx.beginPath();
        ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
        if (snowflake.y > height) {
          snowflake.reset();
        }
      }
      requestAnimFrame(update);
    }
    // shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
      return window.requestAnimationFrame    ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame  ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
    })();
    onResize();
    window.addEventListener('resize', onResize, false);
    masthead.appendChild(canvas);
  })();
</script></body></html>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

原生JS实现的雪花飘落动画效果

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 #Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 #Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 #Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 #Javascript
Angular学习教程之RouterLink花式跳转
May 03 #Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 #Javascript
Vue表单类的父子组件数据传递示例
May 03 #Javascript
You might like
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
jQuery实现聊天对话框
2020/02/08 jQuery
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
星球大战与Python之间的那些事
2016/01/07 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
社区娱乐活动方案
2014/08/21 职场文书
私人委托书格式
2014/09/10 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
中秋节寄语2015
2015/03/24 职场文书
入党介绍人意见范文
2015/06/01 职场文书
学术会议领导致辞
2015/07/29 职场文书