该下雪动画效果使用了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. App云测试平台免费功能汇总

    Wetest  http://wetest.qq.com 阿里云测 https://mqc.aliyun.com/ Testbird  https://www.testbird.com/ 百度 htt ...

  2. mysql索引语法及示例

    注:本篇文章是对菜鸟教程中的mysql索引(http://www.runoob.com/mysql/mysql-index.html)的翻译版本:添加了示例,便于理解: 索引分单列索引和组合索引.单列 ...

  3. 查找（二分、hash、桶）

    先上一个最简单的题 1230 元素查找 给出n个正整数,然后有m个询问,每个询问一个整数,询问该整数是否在n个正整数中出现过. 输入描述 Input Description 第一行两个整数 n 和m. ...

  4. k8s的Dashboard

     前面章节 Kubernetes 所有的操作我们都是通过命令行工具 kubectl 完成的.为了提供更丰富的用户体验,Kubernetes 还开发了一个基于 Web 的 Dashboard,用户可以用 ...

  5. tcpdump学习（2）：基本使用

    安装好tcpdump之后,运行tcpdump: 1. tcpdump -D 获取网络适配器列表,以下是在Ubuntu上获取到的结果: root@holmesian-laptop:~# tcpdump ...

  6. java连接Fastdfs图片服务器上传失败的解决方法

    照着视频上做,但是却连接不了虚拟机linux上的图片服务器,估计是linux防火墙的问题(这个实在是神烦,前面有好几次连接不了都是因为linux防火墙),果不其然,关闭即可. Linux关闭防火墙的命 ...

  7. 从事前端开发必须要了解的CSS原理

    从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢? 一.浏览器的 ...

  8. vi相关内容

    vi显示行号: 第一种是,手动显示:在vim命令行模式下输入 :set nu 取消显示:在vim命令行模式下输入: set nonu 第二种是,永久自动显示:我们修改一个配置文件. 我们输入命令:vi ...

  9. 从dao层查出的数据到页面时数值都是零的异常

    异常问题: IllegalArgumentException: argument type mismatch at cn.tedu.utils.BeanListHandler.handle(BeanL ...

  10. 【互动问答分享】第5期决胜云计算大数据时代Spark亚太研究院公益大讲堂

    Spark亚太研究院100期公益大讲堂 [第5期互动问答分享] Q1:spark怎样支持即席,应该不是spark sql吧,是hive on spark么? Spark1.0 以前支持即席查询的技术是 ...