囍
<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>