该下雪动画效果使用了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. shell浅谈之三for、while、until循环【转】

    转自:http://blog.csdn.net/taiyang1987912/article/details/38929069 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[- ...

  2. 【洛谷P1343】地震逃生

    一道傻吊的网络流题,wori我写的读入优化怎么老T? 远离读入优化报平安? #include<bits/stdc++.h> #define N 4005 #define inf 10000 ...

  3. PHPExcel 长数字串显示为科学计数 与 其他错误

    一.解决 PHPExcel 长数字串显示为科学计数 在excel中如果在一个默认的格中输入或复制超长数字字符串,它会显示为科学计算法,例如身份证号码,解决方法是把表格设置文本格式或在输入前加一个单引号 ...

  4. IE6 下的HTML5兼容问题

    下面列举IE6中10个不得不注意的问题: 1. 使用 DOCTYPE你需要在HTML页面的最顶部加上DOCTYPE类型,当然, strict版是值得推荐的,例如: <!DOCTYPE HTML ...

  5. ReentrantLock 相关学习笔记

    ReentrantLock 相关学习笔记 标签(空格分隔): Java多线程 Java接口Lock有三个实现类:ReentrantLock.ReentrantReadWriteLock.ReadLoc ...

  6. Selenium2+python自动化21-TXT数据参数化【转载】

    前言      在17篇我们讲了excel数据的参数化,有人问了txt数据的参数化该怎么办呢,下面小编为你带你txt数据参数化的讲解 一.以百度搜索为例,自动搜索五次不同的关键字.输入的数据不同从而引 ...

  7. sqlalchemy源代码阅读随笔（4）:url。py 阅读

    在_to_string中,有 _rfc_1738_quote(text): 这个函数.这个主要是遵循 RFC 1738的规则.对传入的信息(主要是用户名或者密码)进行格式匹配.其代码就一行: retu ...

  8. 《锋利的jQuery》读书要点笔记7——制作商城网页：网站脚本

    第8章 用jQuery打造个性网站 上一节将网页的样式设计完了,现在开始用jQuery来编写网站的脚本.首先要确定的是应该完成哪些功能. 首页应该完成的功能是: 详情页: 这个页面要完成的效果是: 接 ...

  9. saturate_cast防越界函数

    CV_IMAGE_ELEM(img2,uchar,i,j*3+c)=saturate_cast<uchar>(alpha*( CV_IMAGE_ELEM(img,uchar,i,j*3+c ...

  10. mysql主从复制、读写分离

    一.MySql介绍 MySQL作为世界上使用最为广泛的数据库之一,免费是其原因之一.但不可忽略的是它本身的功能的确很强大.随着技术的发展,在实际的生产环境中,由单台MySQL数据库服务器不能满足实际的 ...