原生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 相关文章推荐
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
新手如何快速理解js异步编程
Jun 24 Javascript
JavaScript获取当前url路径过程解析
Dec 27 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
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
jquery 循环显示div的示例代码
2013/10/18 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Python json转字典字符方法实例解析
2020/04/13 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
Python类型转换的魔术方法详解
2020/12/23 Python
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
售后服务承诺书
2014/03/26 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
担保书格式
2015/01/20 职场文书
雨花台导游词
2015/02/06 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python