html5 canvas全屏烟花动画特效

    xiaoxiao2026-02-22  15

    许多地方在春节、元宵等节日有放烟花的习俗,如果在网页上模拟烟花,以前也有一些javascript实现的效果,自从HTML5兴起之后,网页模拟烟花更加容易、逼真了。 效果展示: http://hovertree.com/texiao/html5/43/ 效果图: 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html5 canvas全屏烟花动画特效 - 何问起</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/hovertree.css"> </head> <body> <div class="hovertree"></div> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/html5/43/js/jquery.fireworks.js"></script> <script type="text/javascript"> $('.hovertree').fireworks({ sound: true, // sound effect opacity: 0.9, width: '100%', height: '100%' }); </script> <div style="width:340px;position:fixed;z-index:99;">来源:<a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/h/bjag/me34x8fk.htm">说明</a></div> </body> </html> HTML5不只在图像方面有许多进步,在声音方面也有进步,本烟花特效还可以设置是否有声音效果。sound: true 或者 sound: false 。 本特效源码下载: http://hovertree.com/h/bjag/24o31rk5.htm HTML5的相关题目 以下不是canvas的方法是: A、getContext() B、fill() C、stroke() D、controller() 答案: http://hovertree.com/tiku/bjaf/4tlxjl9k.htm 相关效果: http://hovertree.com/h/bjaf/epbhdsa3.htm 相关资源:HTML5 Canvas庆祝春节过年放烟花动画代码
    最新回复(0)