HTML5 Canvas实现烟花绽放特效

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含HTML5,Canvas,烟花绽放等相关知识,佚名希望在学习及工作中可以帮助到您

本文为大家带来了一款，免费而又安全环保的HTML5 Canvas实现的放烟花特效。

效果如下：

代码如下：

<!DOCTYPE HTML>
<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);
};
//请求动画帧

相关文章