该下雪动画效果使用了HTML5中Canvas画布实现，其中涉及了物理学中曲线运动的相关知识与运算。

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="telephone=no" name="format-detection">

    <meta content="email=no" name="format-detection">

    <title>Snow</title>

    <link rel="stylesheet" href="css/main.css">

</head>

<body>

    <canvas id="canvas"></canvas>

    <script src="js/snow.js"></script>

    <script>

        window.addEventListener('load', function(){

            this.snow = new Snow();

            // 初始化snow对象并开始下雪动画

            snow.init().start();

        });

    </script>

</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

main.css

html, body{

    width: 100%;

    height: 100%;

    overflow: hidden;

    margin: 0;

    padding: 0;

    background-color: #000;

    font-family: 微软雅黑, 华文细黑, 黑体;

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Snow.js

(function(exports, undefined){

    'use strict';

    var document = exports.document;

    function Snow(){

        this.colors = ['#fff'];

        this.balls = [];

        this.windDirection = -1;

        this.ballRadius = 3;

        this.ballsPerFrame = 2;

        this.timeInterval = 40;

        this.windDirectionChangedInterval = 5000;

        this.accumulativeTime = 0;

        return this;

    };

    exports.Snow = Snow;

    Snow.prototype = {

        init: function(args){

            for(var p in args){

                this[p] = args[p];

            }

            this.canvas = this.canvas || document.querySelector('#canvas');

            this.context = this.context || this.canvas.getContext('2d');

            this.canvasWidth = this.canvasWidth || document.body.offsetWidth || document.body.clientWidth;

            this.canvasHeight = this.canvasHeight || document.body.offsetHeight || document.body.clientHeight;

            this.canvas.width = this.canvasWidth;

            this.canvas.height = this.canvasHeight;

            return this;

        },

        start: function(){

            this.timer = this.timer || setTimeout(this.frame.bind(this), this.timeInterval);

            return this;

        },

        frame: function(){

            this.accumulativeTime += this.timeInterval;

            (this.accumulativeTime % this.windDirectionChangedInterval < this.timeInterval) && (this.windDirection *= -1);

            this.render.call(this);

            this.update.call(this);

            this.timer = null;

            this.timer = setTimeout(this.frame.bind(this), this.timeInterval);

        },

        update: function(){

            this.addBalls.call(this);

            this.updateBalls.call(this);

        },

        updateBalls: function(){

            var balls = this.balls,

                len = balls.length,

                i = 0,

                cnt = 0;

            for(;i<len;i++){

                balls[i].x += balls[i].vx * this.windDirection;

                balls[i].y += balls[i].vy;

                balls[i].vy += balls[i].g * balls[i].t;

                balls[i].t += this.timeInterval;

                if(balls[i].y - this.ballRadius < this.canvasHeight){

                    balls[cnt++] = balls[i];

                }

            }

            while(len>cnt){

                balls.pop();

                len--;

            }

        },

        addBalls: function(){

            var ball,

                i = 0,

                len = this.ballsPerFrame,

                _this = this;

            for(;i<len;i++){

                ball = {

                    x: Math.pow(-1, Math.ceil(Math.random() * 1000)) * Math.floor(Math.random() * _this.canvasWidth * 1.5),

                    y: Math.floor(Math.random() * this.ballRadius) * -1,

                    g: 0.00005,

                    vx: 1 + Math.floor(Math.random() * 2),

                    vy: 2 + Math.floor(Math.random() * 5),

                    t: 0,

                    color: _this.colors[Math.floor(Math.random() * _this.colors.length)]

                }

                this.balls.push(ball);

            }

        },

        render: function(){

            var cxt = this.context,

                i = 0,

                len = this.balls.length;

            cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

            for(;i<len;i++){

                cxt.fillStyle = this.balls[i].color;

                cxt.beginPath();

                cxt.arc(this.balls[i].x, this.balls[i].y, this.ballRadius, 0, 2 * Math.PI, true);

                cxt.closePath();

                cxt.fill();

            }

        },

        pause: function(){

            clearTimeout(this.timer);

            this.timer = null;

        },

        resume: function(){

            this.start.call(this);

        },

        clear: function(){

            clearTimeout(this.timer);

            this.timer = null;

            this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

        }

    }

})(window);
 

使用JavaScript和Canvas实现下雪动画效果的更多相关文章

  1. javascript实现汉诺塔动画效果

    javascript实现汉诺塔动画效果 当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...

  2. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  3. 八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

    HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only a ...

  4. 数字雨（Javascript使用canvas绘制Matrix，效果很赞哦）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 神奇的canvas——点与线绘制的绚丽动画效果

    代码地址如下:http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...

  6. anime.js 实战：实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  7. Canvas的下雪效果

    cfs.snow.js canvas 下雪场景 不会影响页面使用 使用方式非常简单 利用这个js文件,我们就能很快的让页面出现下雪的动画效果. 例如 <script type="tex ...

  8. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  9. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

随机推荐

  1. PL/SQL 06 函数 function

    --函数 create or replace function  函数名称(参数1 类型1,参数2 类型2,...)  return 数据类型as  变量.常量声明;begin  代码;end; cr ...

  2. PL/SQL 04 游标 cursor

    --游标 declare  cursor 游标名字  is  查询语句;begin  其他语句;end; --游标的属性%FOUND%NOTFOUND%ISOPEN%ROWCOUNT(当前游标的指针位 ...

  3. Oracle 10g 安装环境配置脚本

    #!/bin/bash #Test in RHEL 5.5 for 10g c=`cat /etc/shadow | grep oracle | wc -l`if [ $c != 0 ]then  w ...

  4. springboot整合mybatis+pageHelper

    springboot整合mybatis+pageHelper 〇.搭建sporingboot环境,已经整合mybatis环境,本篇主要是添加pageHelper工具 一.添加依赖 <!-- 分页 ...

  5. Selenium2+python自动化51-unittest简介【转载】

    前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG,这个招聘的需求上也是经常见到的.python里面也有单元测试框架-unittest,相当于是一个python版的junit. ...

  6. centos 查看 arp

    yum install tcpdump -y tcpdump arp :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ...

  7. Delphi:对TNotifyEvent的理解

    type TNotifyEvent = procedure (Sender: TObject) of object; 在Delphi中事件也是一个类,类型就是事件类型,不同的事件属于不同的类.TNot ...

  8. AC日记——Keywords Search hdu 2222

    2222 思路: ac自动机模板题: 代码: #include <cstdio> #include <cstring> #include <iostream> #i ...

  9. 记录一次WebService使用的经历

    于业务需要,需要和第三方对接一些接口,但是问题是,他们的接口提供是webservice的,本人只精通restful接口(也就是说我比较年轻^-^).好在对面人特别奈斯,一顿指导我,感谢. 废话不多说了 ...

  10. 9、Flask实战第9天：类视图

    之前我们接触的视图都是函数,所以一般简称为视图函数.其实视图函数也可以基于类来实现,类视图的好处是支持继承,写完类视图需要通过app.add_url_rule(url_rule, view_func) ...