使用JavaScript和Canvas实现下雪动画效果

该下雪动画效果使用了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>

main.css

html, body{

    width: 100%;

    height: 100%;

    overflow: hidden;

    margin: 0;

    padding: 0;

    background-color: #000;

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

}

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实现下雪动画效果的更多相关文章

javascript实现汉诺塔动画效果
javascript实现汉诺塔动画效果当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...
javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
八大疯狂的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 ...
数字雨（Javascript使用canvas绘制Matrix，效果很赞哦）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
神奇的canvas——点与线绘制的绚丽动画效果
代码地址如下:http://www.demodashi.com/demo/11636.html 前言之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...
anime.js 实战：实现一个带有描边动画效果的复选框
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
Canvas的下雪效果
cfs.snow.js canvas 下雪场景不会影响页面使用使用方式非常简单利用这个js文件,我们就能很快的让页面出现下雪的动画效果. 例如 <script type="tex ...
JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

随机推荐

Oracle基础 03 回滚表空间 undo
--查询默认的undo表空间 select name,value from v$parameterwhere name like '%undo%'; --创建 undotbs2 表空间 create ...
C# WinForm窗体界面设置
设置方法: 一:Form对象属性: 设计中的Name:窗体类的类名AcceptButton:窗口的确定按钮CancelButton:窗口按ESC的取消按钮 1.外观 Backcolor:背景颜色Fo ...
【C++】指针和new相关
看黄邦勇帅的笔记. 指针和new之前觉得已经掌握的很好了,可是看了资料还是get到了新知识.记录一下. 1.指针只支持 4 种算术运算符:++,――,+,-．指针只能与整数加减．指针运算的原则是:每当 ...
Java 的初始化顺序
初始化顺序: 1.将对象内存空间初始化为二进制0(所有的数据成员被设为默认值) 2.如果该类有基类则初始化其基类(调用默认基类构造器,也可在子类构造器中指定调用基类的某个构造器) 3. 静态成员和静态 ...
Appium+python自动化29-toast消息【转载】
本篇转自博客:上海-悠悠前言 appium1.5以后的版本才支持toast定位,并且 'automationName'得设置为'Uiautomator2',才能捕获到. 一. Supported P ...
nginx部署vue工程和反向代理nodejs工程
前端是vue,后端是nodejs 前端打包成dist目录,后端接口是localhost:4000/api server { listen 80; #listen [::]:80; server_nam ...
could not find or load the Qt platform plugin "xcb"
没有解决一些资料: https://wiki.qt.io/Install_Qt_5_on_Ubuntu http://doc.qt.io/qt-5/linux-requirements.html h ...
手工安装kubernetes
参考的URL是 http://www.cnblogs.com/zhenyuyaodidiao/p/6500830.html 安装kubernets本身比较顺利,只是作dashboard时,老是日文版, ...
UVALive 5097 Cross the Wall
贪心思想,$dp$,斜率优化. 首先将人按照$w$从大到小排序,如果$w$一样,按$h$从大到小排.这样一来,某位置之后,比该位置$h$小的都是不需要考虑的. 因此,形成了如下图所示的结果: 即第一个 ...
uva10256
uva10256 题意平面上存在两种颜色的点,问是否存在一条直线,使得任取一个红点和一个蓝点都在直线的异侧,这条直线不经过任何点. 分析对每种颜色的点求一发凸包,问题等价于判断两个多边形是否相交或 ...

使用JavaScript和Canvas实现下雪动画效果

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

随机推荐

热门专题