原生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下弹出窗口的变通
Apr 18 Javascript
Javascript 类与静态类的实现(续)
Apr 02 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
js实现消息滚动效果
2017/01/18 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python获取目录下所有文件的方法
2015/06/01 Python
django文档学习之applications使用详解
2018/01/29 Python
对python 命令的-u参数详解
2018/12/03 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
七年级生物教学反思
2014/01/30 职场文书
2014年高考决心书
2014/03/11 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
Python 阶乘详解
2021/10/05 Python
JavaScript组合继承详解
2021/11/07 Javascript
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL