原生射流研究…实现的雪花飘落动画效果

本文实例讲述了原生射流研究…实现的雪花飘落动画效果。分享给大家供大家参考，具体如下：

！DOCTYPE htmlhtmlhead元字符集='utf-8 '元http-equiv=' X-UA-兼容'内容=' IE=edge ' titlewww.jb51.net JS下雪动画/title meta name=' description ' content=' meta name=' viewport ' content=' width=device-width，initial-scale=1'/headstyle .刊头{底色： # 333；显示：块；宽度：100%;高度：400 px}/style body div class=' mast head '/div script(function(){ var COUNT=300；var主标题=文档。queryselector(' .刊头');var canvas=文档。create element(' canvas ')；var CTX=画布。get context(' 2d ')；可变宽度=桅杆头。客户端宽度；可变高度=桅杆头。客户身高；var I=0；var有效=假函数onResize(){ width=桅杆头。客户端宽度；高度=桅杆头。客户身高；canvas.width=宽度；canvas.height=高度；CTX。FillStyle=' # FFF '；var wasActive=有效有效=宽度600;if(！WasActive active)请求anismframe(更新);} var雪花=function(){ this。x=0；这个。y=0；这个。vy=0；这个。VX=0；这个。r=0；这个。reset()；};雪花。原型。reset=function(){ this。x=数学。random()*宽度；这个。y=数学。random()*-高度；这个。vy=1数学。random()* 3；这个。VX=0.5-数学。random()；这个。r=1数学。random()* 2；这个。o=0.5数学。random()* 0.5；};canvas.style.position='绝对；帆布。风格。左=画布。风格。top=' 0定义变量雪花=[],雪花；for(I=0；I COunti){ 0雪花=新雪花();雪花。推（雪花);}函数update() { ctx.clearRect(0，0，宽度，高度);if(！主动)返回；for(I=0；I COunti){ 0雪花=雪花[一]；雪花。y=雪花。vy；雪花。x=雪花。VX；ctx.globalAlpha=雪花。o；CTX。begin path()；ctx.arc(雪花。x，雪花。y，雪花。r，0，数学.PI * 2，假);CTX。close path()；CTX。fill()；如果(雪花。y高度){雪花。reset()；} } requestAnimFrame(更新);} //带有定时器回退窗口的填补层。request animsframe=(function(){ return window。requestanimationframe | | window。webkitrequestanimationframe | |窗口。mozrequestanimationframe | |函数(回调){ window.setTimeout(回调，1000/60);};})();onResize()；窗户。addeventlistener(' resize '，onResize，false)；masthead.appendChild(画布);})();/脚本/正文/html使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript动画特效与技巧汇总》 、 《JavaScript页面元素操作技巧总结》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript图形绘制技巧总结》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。