<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery随机点名中奖后放烟花动画特效</title>
<style>
*{margin:0;padding:0; font-family:"微软雅黑";}
.box{
width:80vw;
margin:0 auto;
background:#EFEFEF;
position: absolute;
/*left: 0;*/
left: calc(50% - 40vw); /*水平居中*/
top: 0;
}
#name{
padding:60px;
font-size:40px;
font-weight:900;
text-align:center;
background:url(images/6.jpg) no-repeat center;
/*以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉*/
-webkit-background-clip:text;
-webkit-text-fill-color:transparent; /*文字颜色填充*/
}
h1{
letter-spacing:3px;
height:70px;
line-height:70px;
background:#ccc;
text-align:center;
-webkit-text-stroke:1px #000; /*字体描边*/
-webkit-text-fill-color:transparent;/*谷歌内核特有的属性*/
}
#bt{
height:50px;
line-height:50px;
background:deepskyblue;
text-align:center;
color:#fff;
cursor:pointer;
}
#canvas{
display:none;
}
</style>
</head>
<body id="bodyid">
<canvas id="canvas"></canvas>
<div class="box">
<h1>金榜题名</h1>
<div id="name">张三</div>
<div id="bt" onclick="doit()">开始点名</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
var canvas = $('#canvas')[0];
canvas.width = $(window).width();
canvas.height = $(window).height();
var ctx = canvas.getContext('2d');
// resize
$(window).on('resize', function() {
canvas.width = $(window).width();
canvas.height = $(window).height();
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
});
// init
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// objects
var listFire = [];
var listFirework = [];
var fireNumber = 10;
var center = { x: canvas.width / 2, y: canvas.height / 1.5 };
var range = 100;
for (var i = 0; i < fireNumber; i++) {
var fire = {
x: Math.random() * range / 2 - range / 4 + center.x,
y: Math.random() * range * 2 + canvas.height,
size: Math.random() + 0.5,
fill: '#fd1',
vx: Math.random() - 0.5,
vy: -(Math.random() + 4),
ax: Math.random() * 0.02 - 0.01,
far: Math.random() * range + (center.y - range)
};
fire.base = {
x: fire.x,
y: fire.y,
vx: fire.vx
};
//
listFire.push(fire);
}
function randColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = 'rgb($r, $g, $b)';
color = color.replace('$r', r);
color = color.replace('$g', g);
color = color.replace('$b', b);
return color;
}
(function loop() {
requestAnimationFrame(loop);
update();
draw();
})();
function update() {
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
//
if (fire.y <= fire.far) {
// case add firework
var color = randColor();
for (var i = 0; i < fireNumber * 5; i++) {
var firework = {
x: fire.x,
y: fire.y,
size: Math.random() + 1.5,
fill: color,
vx: Math.random() * 5 - 2.5,
vy: Math.random() * -5 + 1.5,
ay: 0.05,
alpha: 1,
life: Math.round(Math.random() * range / 2) + range / 2
};
firework.base = {
life: firework.life,
size: firework.size
};
listFirework.push(firework);
}
// reset
fire.y = fire.base.y;
fire.x = fire.base.x;
fire.vx = fire.base.vx;
fire.ax = Math.random() * 0.02 - 0.01;
}
//
fire.x += fire.vx;
fire.y += fire.vy;
fire.vx += fire.ax;
}
for (var i = listFirework.length - 1; i >= 0; i--) {
var firework = listFirework[i];
if (firework) {
firework.x += firework.vx;
firework.y += firework.vy;
firework.vy += firework.ay;
firework.alpha = firework.life / firework.base.life;
firework.size = firework.alpha * firework.base.size;
firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
//
firework.life--;
if (firework.life <= 0) {
listFirework.splice(i, 1);
}
}
}
}
function draw() {
// clear
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.18;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// re-draw
ctx.globalCompositeOperation = 'screen';
ctx.globalAlpha = 1;
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
ctx.beginPath();
ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = fire.fill;
ctx.fill();
}
for (var i = 0; i < listFirework.length; i++) {
var firework = listFirework[i];
ctx.globalAlpha = firework.alpha;
ctx.beginPath();
ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = firework.fill;
ctx.fill();
}
}
});
//点名事件
var id = document.getElementById('canvas');
var namelist=["李四","王五","二二","一一","三三"];
var mytime=null;
function doit(){
var bt = document.getElementById("bt");
if(mytime==null)
{
bt.innerHTML = "停止点名";
bt.style.background = 'palevioletred';
id.style.display = 'none'
//随机点名
show();//定义一个方法
}else{
bt.innerHTML = "开始点名";
bt.style.background = "deepskyblue";
clearTimeout(mytime);
mytime = null;
id.style.display = 'block'
}
}
/*Math.floor 向下取整(-16.2就为-17)，去除小数*/
function show(){
var name = document.getElementById("name");
var num=Math.floor(Math.random()*namelist.length);
name.innerHTML = namelist[num];
mytime = setTimeout(show,80);
}
</script>
</body>
</html>
