本文主要包含HTML5,Canvas,烟花绽放等相关知识,匿名希望在学习及工作中可以帮助到您
本文为大家带来了一款，免费而又安全环保的HTML5 Canvas实现的放烟花特效。
效果如下：
代码如下：
- >
- <html>
- <head>
- <title>Canvas 实现放烟花特效title>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
- <style type="text/css">
- html,body{height:100%;margin:0;padding:0}
- ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
- img{border:0}
- body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
- canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
- #header img{width:100%; height:20%;}
- #bg img{width:100%; height:80%;}
- #header,#bg{position:fixed;left:0;right:0;z-index:10}
- #header{top:0}
- #bg{position:fixed;z-index:1;bottom:0}
- audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}
- style>
- head>
- <body>
- <div id="bg">
- <img id="bgimg" src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006.jpg">
- div>
- <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js">script>
- <script>
- $(function(){
- var Fireworks = function(){
- var self = this;
- // 产生烟花随机数
- var rand = function(rMi, rMa){
- //按位取反运算符
- return ~~((Math.random()*(rMa-rMi+1))+rMi);
- },hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){
- return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
- };
- //请求动画帧
- window.requestAnimFrame=function(){
- return window.requestAnimationFrame
- ||window.webkitRequestAnimationFrame
- ||window.mozRequestAnimationFrame
- ||window.oRequestAnimationFrame
- ||window.msRequestAnimationFrame
- ||function(callback){
- window.setTimeout(callback,1000/60);
- }
- }();
- self.init = function(){
- self.canvas = document.createElement('canvas');
- //canvas 全屏
- selfself.canvas.width = self.cw = $(window).innerWidth();
- selfself.canvas.height = self.ch = $(window).innerHeight();