css雪花飘落效果,雪花飘落js特效代码
在网上看到很多展示html5雪花飞舞的效果真的很迷人。我相信每个人都和我一样兴奋，好奇研究如何实现代码。虽然很多地方都可以下载这些源代码，但是我不知道别人在制作这类动画时的想法和难处。
这几天刚学习，趁着这一刻，从需求分析，知识点，编程，一步一步的解剖。如果你在关公面前玩大刀，不要笑。
最终效果图如下：
图1
一、需求分析
1.圆形雪花
在本例中，雪花形状使用了一个圆形。
2.雪花的数量是固定的。
根据图1，仔细观察白色雪花的数量。在下落过程中，整个图形中雪花的数量应该是固定的。这个需求需要通过我们的观察和分析来获得。这和现实生活中我们看到一片雪花漫天飞舞的场景是一致的。
3.雪花大小不一样。
每片雪花都有自己的大小，也就是说雪花的半径是随机的。这也和现实生活中我们看到一片雪花漫天飞舞的场景相吻合。
4.雪花在移动。
雪花在飘落，自然它们的位置也在移动。
二、知识点
1.用Html5 Canvas JavaScript画一个圆3354形成圆形雪花。
在Html5中，需要用Canvas和JavaScript画一个圆，形成一个圆形的雪花——arc (x，y，r，start，stop)；
2.生成不同半径和坐标的随机数圆形雪花。
在这个例子中，第一次加载网页时，需要生成一定数量的不同半径和位置的雪花，所以半径和坐标都是随机数；在落雪的过程中，其半径不变，坐标在一定范围内变化，所以此时的坐标也是随机数——Math.random()
三、程序编写
1、准备工作
放一块帆布画布，全身背景色设置为黑色。
HTML代码：
XML/HTML代码将内容复制到剪贴板canvasid=mycanvas 您的浏览器不支持画布/画布CSS代码：
代码将内容复制到剪贴板* { margin:0；填充：0；} #mycanvas{背景：黑色；}此时的效果如下：
注意：canvas默认有一个初始高度和宽度，不用担心。
2、画布满屏显示
JavaScript代码如下：
代码将内容复制到剪贴板//Get my canvas canvas varcan=document . getelementbyid( my canvas )；var CTX=can . get context( 2d )；//画布宽度var wid=window . inner width；//画布高度var hei=window . inner height；can.width=widcan.height=hei这时，效果如下：
3、初始化生成固定数量的雪花
根据上面的需求分析和知识点解读，首先雪花的个数是固定的，所以我们需要定义一个变量varsnow=100这里，假设雪花的数量是100；
当雪花生成时，每个雪花都有不同的半径和位置。我们把每一片雪花看成一个对象，这个对象的属性包括：半径和坐标(x，y)。那么一个雪花对象可以写成varsnowobject={x: 1，y: 10，r: 5}，表示一个坐标为(1，10)，半径为5的圆形雪花。在这个例子中，由于半径和坐标是随机数，所以使用Math.random()分别生成100片雪花的半径和坐标(x，y)；
那么我们这里有100个雪花，那么为了方便后面的操作，我们就用一个数组来保存这100个雪花对象。
JavaScript代码如下：
代码将内容复制到剪贴板//雪花数量varsnow=100//雪花坐标，半径vararr=[]；//保存每个圆的坐标和半径为(vari=0；isnowI){ arr . push({ x:math . random()* wid，y:Math.random()*hei，r:math . random()* 10 1 })}4、绘制雪花
上面，我们已经生成了100片雪花的半径和坐标(x，y)，下面，我们用圆形使用画布绘制雪花(这里是画圆)。这里，我们定义一个函数。
JavaScript代码如下：
代码将内容复制到剪贴板//Draw snow函数Draw snow(){ CTX . fill style= white ；CTX . begin path()；for(vari=0；isnowI){ varp=arr[I]；ctx.moveTo(p.x，p . y)；ctx.arc(p.x，p.y，p.r，0，2 *数学。圆周率，假)；} CTX . fill()；CTX . close path()；然后调用DrawSnow()函数，效果如下：
你可以试着刷新几次网页，看看会不会产生不同大小和位置的雪花(正常情况下是有可能的)，最后的效果接近这里。
注意：由于这里需要画100个圆，所以每画一个圆就重新定义一次画图起点坐标，即：ctx.moveTo(p.x，p . y)；否则会有奇怪的效果。不信你可以试试。
5、雪花飘动
我们在上面画了100片雪花。遗憾的是，我们只能通过刷新网页来看到变化的效果，而我们需要实现的是雪花不停的移动。
首先我们需要借助setInterval函数不断重画雪花，其中间隔为50毫秒：setInterval(DrawSnow，50)；
同时，每片雪花的坐标(x，y)需要不断变化(在一定范围内)。这里的雪花是从左上往右下落下的，所以每片雪花的坐标值都在不断增加。然后，我们用一个函数snowflake()来定义雪花漂移的规则。
功能代码如下：
代码将内容复制到剪贴板//雪花飘落函数snow den(){ for(vari=0；isnowI){ varp=arr[I]；p . y=math . random()* 2 1；if(p . yhei){ p . y=0；} p . x=math . random()* 2 1；if(p . xwid){ p . x=0；span style= white-space:pre /span } } }
然后把这个函数放到DrawSnow()中执行。注意：每隔50毫重绘雪花时我们要擦除画布，所以必须在DrawSnow()函数体前面执行clearRect()函数，即：ctx.clearRect(0，0，wid，hei)；
此时，DrawSnow函数定义如下：
代码将内容复制到剪贴板//Draw snow函数drawsnow () {ctx.clearrect (0，0，WID，HEI)；ctx.fillStyle= whiteCTX . begin path()；for(vari=0；isnowI){ varp=arr[I]；ctx.moveTo(p.x，p . y)；ctx.arc(p.x，p.y，p.r，0，2 *数学。圆周率，假)；} CTX . fill()；降雪()；CTX . close path()；}最后执行setInterval(DrawSnow，50)；
好了，经过以上步骤，小伙伴们都清楚整个流程和技术实现了吗？
完整代码如下(可以直接复制到自己的项目中，测试效果):
XML/HTML代码复制内容到剪贴板！doctype html html head meta charset= utf-8 /title/title脚本RC= js/jquery-1。8 .3 .量滴js /script style type= text/CSS * { margin:0；填充：0;} #我的画布{背景：黑色；}/style/head body canvasid=我的画布您的浏览器不支持帆布画布/画布脚本//获取我的画布画布varcan=文档。getelementbyid(我的画布)；var CTX=can。获取上下文(“2d”)；//画布宽度var wid=窗口。内部宽度；//画布高度var hei=窗口。内部高度；can.width=widcan.height=hei//雪花数目varsnow=100//雪花坐标、半径vararr=[]；//保存各圆坐标及半径for(vari=0；isnowI){ arr。推({ x:数学。random()* wid，y:Math.random()*hei，r:Math.random()*10 1 }) } //画雪花functionDrawSnow(){ CTX。clear rect(0，0，wid，hei)；ctx.fillStyle= whiteCTX。begin path()；for(vari=0；is nowi){ varp=arr[I]；ctx.moveTo(p.x，p . y)；ctx.arc(p.x，p.y，p.r，0，2 *数学。圆周率，假);} CTX。fill()；降雪();CTX。关闭路径()；} //雪花飘落函数snow den(){ for(vari=0；is nowi){ varp=arr[I]；数学。random()* 2 ^ 1；if(p . yhei){ p . y=0；} p . x=数学。random()* 2 ^ 1；if(p . xwid){ p . x=0；} } } setInterval(DrawSnow，50)；/script /body /html好了，今天分享就到这里，希望对大家的学习有所帮助。
原文：http://www。cnblogs。com/唐一锋/p/5253629.html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。