原生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 相关文章推荐
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
angularjs中ng-bind-html的用法总结
May 23 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
JavaScript中跨域问题的深入理解
Mar 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
php empty函数 使用说明
2009/08/10 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
React快速入门教程
2017/01/17 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
用js实现放大镜效果
2020/10/28 Javascript
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python 26进制计算实现方法
2015/05/28 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
如何把python项目部署到linux服务器
2020/08/26 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
高级销售求职信
2014/02/21 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL