歌与帘与你的寄望
divide by zero
某烟火（canvas）
囍
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body style="margin:0;" onload="start();">
<canvas id="_canvas"></canvas>
</body>
<script>
// 烟火
function Fire(x, y, life, directionX, directionY) {
this.x = x;
this.y = y;
this.life = life;
this.frames = 0; // 帧数计时
this.directionX = directionX;
this.directionY = directionY;
this.color = "rgb(" + Math.floor(Math.random() * 128 + 128) + "," + Math.floor(Math.random() * 128 + 128) + "," + Math.floor(Math.random() * 128 + 128) +")";
}
Fire.prototype = {
// 行进
move : function() {
this.x += this.directionX;
this.y += this.directionY;
this.directionX *= 0.94;
this.directionY *= 0.94;
this.directionY += 0.3;
this.frames += 1;
},
// 失效
powerOut : function() {
return this.frames == this.life;
},
x : function() {
return this.x;
},
y : function() {
return this.y;
},
color : function() {
return this.color;
}
}
// 烟花
function FirePackage(x, y) {
this.x = x;
this.y = y;
this.fires = new Array();
}
FirePackage.prototype = {
createFires : function(num) {
// 添加烟火
if (!num) {
num = Math.floor(Math.random() * 50) + 10;
}
for (var i = 0; i < num; i += 1) {
var life = Math.floor(Math.random() * 80) + 40;
this.fires[i] = new Fire(this.x, this.y, life, Math.random() * 20 * (Math.random() * 10 >=5 ? (-1) : 1), Math.random() * 20 * (Math.random() * 10 >= 5 ? (-1) : 1));
}
},
boom : function(ctx) {
var powerOutCount = 0;
if (this.powerOut()) {
return;
}
for (var i = 0; i < this.fires.length; i += 1) {
var fire = this.fires[i];
if (!fire.powerOut()) {
fire.move();
ctx.fillStyle= fire.color;
ctx.beginPath();
//console.clear();
//console.log("fire.x :" + fire.x, "fire.y:" + fire.y);
//console.log("fire.color :" + fire.color);
ctx.arc(fire.x,fire.y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
} else {
powerOutCount += 1;
}
}
if (powerOutCount == this.fires.length) {
this.powerOutFlag = true;
}
},
powerOut : function() {
return this.powerOutFlag ? true : false;
}
}
</script>
<script>
var canvas = document.getElementById('_canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx=canvas.getContext('2d');
var timeInterval;
window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
var firePackages = new Array();
function createFirePackage(x, y) {
var firePackage = new FirePackage(x, y);
firePackage.createFires();
firePackages.push(firePackage);
}
var pushInterval;
var pushFire = function() {
clearInterval(pushInterval);
createFirePackage(Math.random() * canvas.width , Math.random() * canvas.height);
pushInterval = setInterval(pushFire, Math.random() * 1000 + 100);
}
function start() {
var loop = function() {
if (firePackages.length == 0) {
createFirePackage(Math.random() * canvas.width , Math.random() * canvas.height);
}
var powerOutCount = 0;
var border = 320;
for (var i = 0; i < firePackages.length; i += 1) {
var firePackage = firePackages[i];
ctx.fillStyle="rgba(0,0,0,0.1)";
ctx.fillRect(0,0,canvas.width,canvas.height);
if (!firePackage.powerOut()) {
firePackage.boom(ctx);
} else {
firePackages[i] = firePackages[firePackages.length - 1];
firePackages.pop();
}
}
var border = 360;
ctx.fillStyle="rgba(255,0,0,1)";
ctx.font = border + "px 黑体";
ctx.fillText("囍",(canvas.width - border) / 2, border);
}
timeInterval = setInterval(loop, 10);
pushFire();
loop();
}
</script>
</html>
评论 (0)