欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 12:46:41
本文实例讲述了原生js实现的雪花飘落动画效果。分享给大家供大家参考,具体如下: <...

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>www.jb51.net 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.jb51.net/code/htmljsrun,可得到如下测试运行效果:

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

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript动画特效与技巧汇总》、《javascript页面元素操作技巧总结》、《javascript运动效果与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结

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