该下雪动画效果使用了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. zabbix ZBX_NOTSUPPORTED: Timeout while executing a shell script.

    有一个监控一直都是正常的,今天突然收到报警邮件,上服务器查看服务又是正常的,但是报警邮件还是没恢复 监控端进行脚本测试,发现是正常的 到监控端使用zabbix_get -s ip -p 端口  -k ...

  2. git应用基础配置

    1.注册github账号.注册的时候会要求输入用户名和email这是配置git必须的要素 2.在使用git的时候首先需要把注册时候配合的用户名和密码填在git仓库的配置文件里,如下 harvey@ha ...

  3. HUST-1350 Trie

    1350 - Trie 时间限制:1秒 内存限制:128兆 104 次提交 35 次通过 题目描述 In computer science, a trie, is an ordered tree da ...

  4. 转载---sql之left join、right join、inner join的区别

    原文地址:http://www.cnblogs.com/pcjim/articles/799302.html sql之left join.right join.inner join的区别 left j ...

  5. VS2010编写C++程序出现error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "StdAfx.h"”?

    用VS2010编写C++程序,编译时出现如下错误: 修改方法: 右击项目,选择属性 点击确定,重新编译,错误解决.

  6. spark技术热点问题互动问答2

    决胜云计算大数据时代” Spark亚太研究院100期公益大讲堂 [第3期互动问答分享] Q1: groupbykey是排好序的吗?分组排序怎么实现? groupByKey在一个由(K,V)对组成的数据 ...

  7. typescript 定义全局变量以及扩展原生js对象

    使用“declare global”操作即可. 项目根目录下新建myDeclareFile.d.ts declare global { interface Navigator { mediaSessi ...

  8. 【转】Python unittest数据驱动工具：DDT

    背景 python 的unittest 没有自带数据驱动功能. 所以如果使用unittest,同时又想使用数据驱动,那么就可以使用DDT来完成. DDT是 “Data-Driven Tests”的缩写 ...

  9. Problem C: 机器翻译【stl-队列】

    Problem C: 机器翻译 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 54  Solved: 27[Submit][Status][Web Bo ...

  10. The 15th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - B King of Karaoke

    King of Karaoke Time Limit: 1 Second      Memory Limit: 65536 KB It's Karaoke time! DreamGrid is per ...