<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title></title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
var ctx = canvas.getContext("2d");
var arr = [];
var list = [];
function Fire() {
this.x = canvas.width / 2,
this.y = canvas.height,
this.radius = 2,
this.speed = getRandom(8, 12),
this.angle = getRandom(1.1 * Math.PI, 1.9 * Math.PI),
this.color = Math.random() > 0.5 ? 'white' : ('#' + Math.random().toString(16).substr(2, 6).toUpperCase());
}
Fire.prototype.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
Fire.prototype.restore = function () {
this.x = canvas.width / 2;
this.y = canvas.height;
this.speed = getRandom(8, 12);
this.angle = getRandom(1.1 * Math.PI, 1.9 * Math.PI);
}
Fire.prototype.update = function () {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
if (this.y < canvas.height * 0.2 || this.x < canvas.width * 0.1 || this.x > canvas.width * 0.9) {
buildChildFire(this);
this.restore();
}
}
function ChildFire() {
this.x = 0,
this.y = 0,
this.radius = 1,
this.n = 1,
this.speed = getRandom(1, 10) / 5,
this.g = 0.98,
this.mocha = 0.96,
this.color = Math.random() > 0.5 ? 'white' : ('#' + Math.random().toString(16).substr(2, 6).toUpperCase()),
this.angle = getRandom(0, 2 * Math.PI);
}
ChildFire.prototype.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
ChildFire.prototype.update = function (index) {
this.x += Math.cos(this.angle) * this.speed * this.mocha;
this.y += Math.sin(this.angle) * this.speed * this.mocha * this.g;
this.n++;
if (this.n >= 50) {
window.cancelAnimationFrame(this.raf);
list.splice(index, 1);
} else {
this.raf = window.requestAnimationFrame(this.draw);
}
}
var fire = new Fire();
arr.push(fire);
var fire2 = new Fire();
arr.push(fire2);
function clear() {
ctx.fillStyle = 'rgba(0,0,0,0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function buildChildFire(fire) {
for (var i = 0; i < 400; i++) {
var cFire = new ChildFire();
cFire.x = fire.x;
cFire.y = fire.y;
list.push(cFire);
}
}
function draw() {
clear();
list.forEach(function (c, i) {
c.draw();
c.update(i);
})
arr.forEach(function (c, i) {
c.draw();
c.update();
})
window.requestAnimationFrame(draw);
}
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
window.requestAnimationFrame(draw)
</script>
</body>
</html>