[收起] 文章目录
以下是部分代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>HTML5 Canvas实现动态下雪效果_cnsecer.com</title> <link href="css/datouwang.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.let_it_snow.js"></script> <script> $(document).ready( function() { $("canvas.flare").let_it_snow({ windPower: 0, speed: 0, color: "#392F52", size:120, opacity: 0.00000001, count: 40, interaction: false }); $("canvas.snow").let_it_snow({ windPower: 3, speed: 1, count: 250, size: 0, }); $("canvas.flake").let_it_snow({ windPower: -3, speed: 1, count: 20, size: 10, image: "images/white-snowflake.png" }); }); </script> </head> <body> <!-- 代码 开始 --> <canvas width="100%" height="100%" class="flare"></canvas> <canvas width="100%" height="100%" class="snow"></canvas> <canvas width="100%" height="100%" class="flake"></canvas> <!-- 代码 结束 --> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
效果图
真实效果可以访问我的LJY2345外链,查看效果。
赞赏
历史上的文章
- 2017: PHP+Mysql简易报名系统-有后台( 0)
除特别注明外,本站所有文章均为LJY IT BLOG原创,转载请注明出处来自https://www.ljy2345.com/2015/07/html5-canvas-implements-dynamic-snow-effect-code/
Comments | NOTHING