原生JS实现的雪花飘落动画效果
程序员文章站
2022-04-29 12:46:41
本文实例讲述了原生js实现的雪花飘落动画效果。分享给大家供大家参考,具体如下:
<...
本文实例讲述了原生js实现的雪花飘落动画效果。分享给大家供大家参考,具体如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>www.jb51.net js下雪动画</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <style> .masthead { background-color:#333; display:block; width:100%; height:400px; } </style> <body> <div class="masthead"></div> <script> (function () { var count = 300; var masthead = document.queryselector('.masthead'); var canvas = document.createelement('canvas'); var ctx = canvas.getcontext('2d'); var width = masthead.clientwidth; var height = masthead.clientheight; var i = 0; var active = false; function onresize() { width = masthead.clientwidth; height = masthead.clientheight; canvas.width = width; canvas.height = height; ctx.fillstyle = '#fff'; var wasactive = active; active = width > 600; if (!wasactive && active) requestanimframe(update); } var snowflake = function () { this.x = 0; this.y = 0; this.vy = 0; this.vx = 0; this.r = 0; this.reset(); }; snowflake.prototype.reset = function() { this.x = math.random() * width; this.y = math.random() * -height; this.vy = 1 + math.random() * 3; this.vx = 0.5 - math.random(); this.r = 1 + math.random() * 2; this.o = 0.5 + math.random() * 0.5; }; canvas.style.position = 'absolute'; canvas.style.left = canvas.style.top = '0'; var snowflakes = [], snowflake; for (i = 0; i < count; i++) { snowflake = new snowflake(); snowflakes.push(snowflake); } function update() { ctx.clearrect(0, 0, width, height); if (!active) return; for (i = 0; i < count; i++) { snowflake = snowflakes[i]; snowflake.y += snowflake.vy; snowflake.x += snowflake.vx; ctx.globalalpha = snowflake.o; ctx.beginpath(); ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, math.pi * 2, false); ctx.closepath(); ctx.fill(); if (snowflake.y > height) { snowflake.reset(); } } requestanimframe(update); } // shim layer with settimeout fallback window.requestanimframe = (function(){ return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || function( callback ){ window.settimeout(callback, 1000 / 60); }; })(); onresize(); window.addeventlistener('resize', onresize, false); masthead.appendchild(canvas); })(); </script></body></html>
使用本站html/css/js在线运行测试工具:http://tools.jb51.net/code/htmljsrun,可得到如下测试运行效果:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript动画特效与技巧汇总》、《javascript页面元素操作技巧总结》、《javascript运动效果与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇: 利用node.js本地搭建HTTP服务器
下一篇: JS排序之选择排序详解