网页制作

HTML5 canvas实现雪花飘落特效
网页制作 2024/12/23 佚名
3 2

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

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

最终效果图如下：

 HTML5 canvas实现雪花飘落特效

图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代码：

XML/HTML Code复制内容到剪贴板
  1. <canvas id="mycanvas">  
  2.     您的浏览器不支持canvas画布   
  3. </canvas>    
  4.   

CSS代码：

CSS Code复制内容到剪贴板
  1. * {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5.                
  6. #mycanvas {   
  7.     background: black;   
  8. }   
  9.   

此时效果如如下：

 HTML5 canvas实现雪花飘落特效

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

2、画布满屏显示

JavaScript代码如下：

JavaScript Code复制内容到剪贴板
  1. //获取mycanvas画布   
  2.     var can = document.getElementById("mycanvas");   
  3.     var ctx = can.getContext("2d");   
  4.     //画布宽度   
  5.     var wid = window.innerWidth;   
  6.     //画布高度   
  7.     var hei = window.innerHeight;   
  8.     can.width=wid;   
  9.     can.height=hei;   

此时效果如如下：

HTML5 canvas实现雪花飘落特效

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代码如下：

JavaScript Code复制内容到剪贴板
  1. //雪花数目   
  2. var snow = 100;   
  3. //雪花坐标、半径   
  4. var arr = []; //保存各圆坐标及半径   
  5. for (var i = 0; i < snow; i++) {   
  6. arr.push({   
  7. x: Math.random() * wid,   
  8. y: Math.random() * hei,   
  9. r: Math.random() * 10 + 1   
  10. })   
  11. }   


4、绘制雪花

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

JavaScript代码如下：

JavaScript Code复制内容到剪贴板
  1. //画雪花   
  2. function DrawSnow() {   
  3.     ctx.fillStyle="white";   
  4.     ctx.beginPath();   
  5.     for (var i = 0; i < snow; i++) {   
  6.         var p = arr[i];   
  7.         ctx.moveTo(p.x,p.y);   
  8.         ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false);   
  9.     }   
  10.     ctx.fill();   
  11.   
  12.     ctx.closePath();   
  13.   

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

HTML5 canvas实现雪花飘落特效

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

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

 5、雪花飘动

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

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

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

该函数代码如下：

JavaScript Code复制内容到剪贴板
  1. //雪花飘落   
  2. function SnowFall() {   
  3.     for (var i = 0; i < snow; i++) {   
  4.         var p = arr[i];   
  5.         p.y += Math.random() * 2 + 1;   
  6.         if (p.y > hei) {   
  7.             p.y = 0;   
  8.         }   
  9.         p.x += Math.random() * 2 + 1;   
  10.         if (p.x > wid) {   
  11.             p.x = 0;   
  12.     <span style="white-space:pre">    </span>}   
  13.     }   
  14. }  


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

此时DrawSnow函数定义如下：

JavaScript Code复制内容到剪贴板
  1. //画雪花   
  2. function DrawSnow() {   
  3.     ctx.clearRect(0, 0, wid, hei);   
  4.     ctx.fillStyle = "white";   
  5.     ctx.beginPath();   
  6.     for (var i = 0; i < snow; i++) {   
  7.         var p = arr[i];   
  8.         ctx.moveTo(p.x, p.y);   
  9.         ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
  10.     }   
  11.     ctx.fill();   
  12.     SnowFall();   
  13.     ctx.closePath();   
  14. }   

最后执行setInterval(DrawSnow, 50); 

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

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="utf-8" />  
  6.         <title></title>  
  7.         <script src="js/jquery-1.8.3.min.js"></script>  
  8.         <style type="text/css">  
  9.             * {   
  10.                 margin: 0;   
  11.                 padding: 0;   
  12.             }   
  13.                
  14.             #mycanvas {   
  15.                 background: black;   
  16.             }   
  17.         </style>  
  18.     </head>  
  19.   
  20.     <body>  
  21.         <canvas id="mycanvas">  
  22.             您的浏览器不支持canvas画布   
  23.         </canvas>  
  24.         <script>  
  25.             //获取mycanvas画布   
  26.             var can = document.getElementById("mycanvas");   
  27.             var ctx = can.getContext("2d");   
  28.             //画布宽度   
  29.             var wid = window.innerWidth;   
  30.             //画布高度   
  31.             var hei = window.innerHeight;   
  32.             can.width = wid;   
  33.             can.height = hei;   
  34.             //雪花数目   
  35.             var snow = 100;   
  36.             //雪花坐标、半径   
  37.             var arr = []; //保存各圆坐标及半径   
  38.             for (var i = 0; i < snow; i++) {   
  39.                 arr.push({   
  40.                     x: Math.random() * wid,   
  41.                     y: Math.random() * hei,   
  42.                     r: Math.random() * 10 + 1   
  43.                 })   
  44.             }   
  45.             //画雪花   
  46.             function DrawSnow() {   
  47.                 ctx.clearRect(0, 0, wid, hei);   
  48.                 ctx.fillStyle = "white";   
  49.                 ctx.beginPath();   
  50.                 for (var i = 0; i < snow; i++) {   
  51.                     var p = arr[i];   
  52.                     ctx.moveTo(p.x, p.y);   
  53.                     ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
  54.                 }   
  55.                 ctx.fill();   
  56.                 SnowFall();   
  57.                 ctx.closePath();   
  58.             }   
  59.             //雪花飘落   
  60.             function SnowFall() {   
  61.                 for (var i = 0; i < snow; i++) {   
  62.                     var p = arr[i];   
  63.                     p.y += Math.random() * 2 + 1;   
  64.                     if (p.y > hei) {   
  65.                         p.y = 0;   
  66.                     }   
  67.                     p.x += Math.random() * 2 + 1;   
  68.                     if (p.x > wid) {   
  69.                         p.x = 0;   
  70.                     }   
  71.                 }   
  72.             }   
  73.             setInterval(DrawSnow, 50);   
  74.         </script>  
  75.     </body>  
  76.   
  77. </html>  
  78.   

好了，今天分享就到这里，希望对大家的学习有所帮助。
原文：http://www.cnblogs.com/tangyifeng/p/5253629.html

标签：
HTML5,canvas,雪花飘落
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“HTML5 canvas实现雪花飘落特效”

暂无“HTML5 canvas实现雪花飘落特效”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com