看到网上很多展示html5雪花飞动的效果，确实非常引人入胜，我相信大家也跟我一样看着心动的同时，也很好奇，想研究下代码如何实现；虽然哦很多地方也能下载这些源码，不过也不知道别人制作此类动画时的思路及难点分析。

我这几天刚好学习了一下，也趁着此刻有时间从需求分析、知识点、程序编写一步步给大家解剖下，要是在各位关公面前耍大刀了，可别见笑哟。

最终效果图如下：

图1

一、需求分析

1、圆形雪花

本示例中雪花形状使用圆形

2、雪花数量固定

根据图1仔细观察白色雪花数量，飘落过程中，整张图的雪花数量应该是固定的，这个需求是需要通过我们观察分析所得。这与我们现实生活中看到一幅雪花满天飞的场景是一致的。

3、雪花大小不一致

每朵雪花它们大小各有不同，也就意味着雪花的半径是随机的。这与我们现实生活中看到一幅雪花满天飞的场景也是一致的。

4、雪花位置在移动

雪花飘落，自然它们的位置也在移动。

二、知识点

1、使用Html5 Canvas+JavaScript画圆——构成圆形雪花

在Html5中，需要使用Canvas同时借助JavaScript画圆，以构成圆形雪花——arc(x,y,r,start,stop)；

2、随机数—产生不同半径、坐标的圆形雪花

本示例中，网页第一次加载时，需要生成一定数量的不同半径及位置的雪花，故半径、坐标为随机数；雪花在飘落过程中，其半径不变，坐标在一定幅度内变化，故此时坐标也为随机数——Math.random()

三、程序编写

1、准备工作

放一个画布canvas，并且设置整个body背景色为黑色

HTML代码：

<canvas id="mycanvas">

    您的浏览器不支持canvas画布

</canvas>

CSS代码：

* {

    margin:;

    padding:;

}

#mycanvas {

    background: black;

}

此时效果如如下：

注意：canvas默认是有一个初始化高度和宽度的，所以不用去纠结

2、画布满屏显示

JavaScript代码如下：

//获取mycanvas画布

    var can = document.getElementById("mycanvas");

    var ctx = can.getContext("2d");

    //画布宽度

    var wid = window.innerWidth;

    //画布高度

    var hei = window.innerHeight;

    can.width=wid;

    can.height=hei;

此时效果如如下：

3、初始化生成固定数量的雪花

根据我们上述需求分析及知识点解读，首先雪花的数量是固定的，所以我们需要定义一个变量var snow = 100；这里假设雪花数量为100,；

生成雪花的时候，每个雪花半径、位置都不同，我们把每个雪花当做一个对象，那么这个对象的属性就包含：半径、坐标（X、Y），那么一个雪花对象可以写成var snowOject={x:1,y:10,r:5}，这里就代表一个坐标为(1,10)半径为5的圆形雪花；本示例中由于半径和坐标都为随机数，故使用Math.random()分别为100个雪花生成半径、坐标（X、Y）；

那我们这里是100个雪花，所以为了方便后面操作，就用一个数组保存这100个雪花对象。

JavaScript代码如下：

//雪花数目

var snow = 100;

//雪花坐标、半径

var arr = []; //保存各圆坐标及半径

for (var i = 0; i < snow; i++) {

arr.push({

x: Math.random() * wid,

y: Math.random() * hei,

r: Math.random() * 10 + 1

})

}

4、绘制雪花

上面我们已经将100个雪花半径、坐标（X、Y）生成，下面就是循环使用canvas画出雪花了（这里就是画圆），这里定义一个函数

JavaScript代码如下：

//画雪花

function DrawSnow() {

    ctx.fillStyle="white";

    ctx.beginPath();

    for (var i = 0; i < snow; i++) {

        var p = arr[i];

        ctx.moveTo(p.x,p.y);

        ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false);

    }

    ctx.fill();

    ctx.closePath();

然后调用 DrawSnow()函数，效果如下：

可以尝试多次刷新网页看是否会生成不同大小、位置的雪花（正常情况下是可以的），做到这里就已经接近最终效果了

注意：由于这里需要绘制100个圆，所以每当画一个圆时重新定义绘制开始坐标即：ctx.moveTo(p.x,p.y);否则会出现异样效果，不信可以试试呀

 5、雪花飘动

上面我们已经画出100个雪花，可惜只能依靠刷新网页才能看到变化效果，但是我们需要实现的是雪花不停的移动位置。

首先我们需要借助setInterval函数不停的重画雪花，这里间隔时间为50毫秒：setInterval(DrawSnow,50);

同时每一朵雪花的坐标（X、Y）需要不停的改变（在一定幅度内），我们这里的雪花是从左上方飘落到右下方，所以每朵X、Y坐标值都在不停的增大，那我们用一个函数SnowFall()定义雪花飘过规则

该函数代码如下：

//雪花飘落

function SnowFall() {

    for (var i = 0; i < snow; i++) {

        var p = arr[i];

        p.y += Math.random() * 2 + 1;

        if (p.y > hei) {

            p.y = 0;

        }

        p.x += Math.random() * 2 + 1;

        if (p.x > wid) {

            p.x = 0;

    <span style="white-space:pre">    </span>}

    }

}

然后将该函数放入DrawSnow()执行，注意：我们每隔50毫毛重画雪花，必须擦除画布，所以DrawSnow()函数体内必须在前面执行clearRect()函数，即：ctx.clearRect(0, 0, wid, hei);

此时DrawSnow函数定义如下：

//画雪花

function DrawSnow() {

    ctx.clearRect(0, 0, wid, hei);

    ctx.fillStyle = "white";

    ctx.beginPath();

    for (var i = 0; i < snow; i++) {

        var p = arr[i];

        ctx.moveTo(p.x, p.y);

        ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);

    }

    ctx.fill();

    SnowFall();

    ctx.closePath();

}

最后执行setInterval(DrawSnow, 50);

OK，经过我们上述步骤，小伙伴们是否已经对整个过程及技术实现很清晰了。

完整代码如下（大家可以直接复制到自己项目中执行，测试下效果）：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="js/jquery-1.8.3.min.js"></script>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            #mycanvas {

                background: black;

            }

        </style>

    </head>

    <body>

        <canvas id="mycanvas">

            您的浏览器不支持canvas画布

        </canvas>

        <script>

            //获取mycanvas画布

            var can = document.getElementById("mycanvas");

            var ctx = can.getContext("2d");

            //画布宽度

            var wid = window.innerWidth;

            //画布高度

            var hei = window.innerHeight;

            can.width = wid;

            can.height = hei;

            //雪花数目

            var snow = 100;

            //雪花坐标、半径

            var arr = []; //保存各圆坐标及半径

            for (var i = 0; i < snow; i++) {

                arr.push({

                    x: Math.random() * wid,

                    y: Math.random() * hei,

                    r: Math.random() * 10 + 1

                })

            }

            //画雪花

            function DrawSnow() {

                ctx.clearRect(0, 0, wid, hei);

                ctx.fillStyle = "white";

                ctx.beginPath();

                for (var i = 0; i < snow; i++) {

                    var p = arr[i];

                    ctx.moveTo(p.x, p.y);

                    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);

                }

                ctx.fill();

                SnowFall();

                ctx.closePath();

            }

            //雪花飘落

            function SnowFall() {

                for (var i = 0; i < snow; i++) {

                    var p = arr[i];

                    p.y += Math.random() * 2 + 1;

                    if (p.y > hei) {

                        p.y = 0;

                    }

                    p.x += Math.random() * 2 + 1;

                    if (p.x > wid) {

                        p.x = 0;

                    }

                }

            }

            setInterval(DrawSnow, 50);

        </script>

    </body>

</html>

好了，今天分享就到这里，我现在都写到半夜了哟（此刻：2016年3月8日00:22:27），没有功劳也有苦劳啊，大家都给我评论下嘛

以后还有更多哟，请大家一起来交流下。

HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）的更多相关文章

  1. HTML5 canvas绘制雪花飘落

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...

  2. [js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解

    路径在canvas绘图中,经常被用到,是一个非常重要的概念. 比如:我们要在canvas画出3条直线,要求用不同的颜色加以区分. <style> body { background: #0 ...

  3. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  4. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  5. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  6. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  7. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  8. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

随机推荐

  1. 新浪旗下的SAE云服务入门

    前言: 云服务已经火热很多年了,到了现在已经基本进入稳定期,稍微有实力的公司都会推出免费的云存储,像百度的还几个T,速度也不错.如果不担心数据安全问题,代替平时的U盘还是没有问题.而SAE是新浪在20 ...

  2. Nginx + Tomcat + Session

    分别下载 tomcat http://archive.apache.org/dist/tomcat/tomcat-7/v7.0.22/bin/apache-tomcat-7.0.22.tar.gz n ...

  3. iOS完美的网络状态判断工具

    大多数App都严重依赖于网络,一款用户体验良好的的app是必须要考虑网络状态变化的.iOSSinger下一般使用Reachability这个类来检测网络的变化. Reachability 这个是苹果开 ...

  4. Linux PAM&&PAM后门

    Linux PAM&&PAM后门 我是壮丁 · 2014/03/24 11:08 0x00 PAM简介 PAM (Pluggable Authentication Modules )是 ...

  5. careercup-中等难度 17.5

    17.5 写一个函数来模拟游戏. 游戏规则如下: 4个槽,里面放4个球,球的颜色有4种,红(R ),黄(Y),绿(G),蓝(B).比如, 给出一个排列RGGB,表示第一个槽放红色球,第二和第三个槽放绿 ...

  6. java_spring_依赖注入

    IOC反转控制 PersonService属性 PersonDao personDao接受通过xml注入的对象 PersonDaoBean.  Person中save()调用 PersonDaoBea ...

  7. Eclipse 常用快捷键与使用技巧总结

    一.实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制).CTRL+X(剪切).CTRL+Z(撤销).CTRL+F(查找).CTRL+H(搜索文件或字符串).CTRL+/(双斜杠注释).ALT+/ ...

  8. iOS 符号表恢复 & 逆向支付宝

    推荐序 本文介绍了恢复符号表的技巧,并且利用该技巧实现了在 Xcode 中对目标程序下符号断点调试,该技巧可以显著地减少逆向分析时间.在文章的最后,作者以支付宝为例,展示出通过在 UIAlertVie ...

  9. Fixflow引擎解析(一)(介绍) - Fixflow开源流程引擎介绍

    Fixflow引擎解析(四)(模型) - 通过EMF扩展BPMN2.0元素 Fixflow引擎解析(三)(模型) - 创建EMF模型来读写XML文件 Fixflow引擎解析(二)(模型) - BPMN ...

  10. Java基础知识强化之网络编程笔记22：Android网络通信之 Android常用OAuth登录（获取个人信息）

    1. 获取百度个人信息(使用Gson解析): 2. 代码案例: (1)工程一览图,如下: (2)activity_main.xml: <LinearLayout xmlns:android=&q ...