html图片以烟花展现,HTML5花环式烟花绽放动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

const Bounds = {

height: window.innerHeight,

width: window.innerWidth

};

const colors = ['#15AB88', '#6AD97D', '#AEFF79', '#D0FF78', '#F1FF79'];

const canvas = document.createElement('canvas');

const context = canvas.getContext('2d');

canvas.width = Bounds.width;

canvas.height = Bounds.height;

document.body.appendChild(canvas);

class Circle {

constructor(center, radius, color, alpha) {

this.center = center;

this.radius = 0;

this.maxRadius = radius;

this.color = color;

this.triangles = this.generateTriangles();

this.alpha = alpha;

}

generateTriangles() {

let triangles = [];

for(let i = 0; i <= Math.PI*2; i += Math.PI/5) {

triangles.push(new Triangle({

x: this.center.x + this.radius * Math.cos(i),

y: this.center.y + this.radius * Math.sin(i),

},

i,

25,

this.color

));

}

return triangles;

}

update() {

if(this.radius / this.maxRadius > 0.985) {

this.radius = 0;

this.alpha = Math.PI * Math.random();

}

this.radius += (this.maxRadius - this.radius) * 0.02;

}

render() {

this.triangles.forEach((triangle, index) => {

triangle.position = {

x: this.center.x + this.radius * Math.cos(triangle.alpha + this.alpha),

y: this.center.y + this.radius * Math.sin(triangle.alpha + this.alpha),

};

triangle.size = triangle.maxSize * Math.sin(Math.PI*(this.radius/this.maxRadius))

let t1, t2;

if(index === 0) {

t1 = this.triangles[this.triangles.length-1].position;

} else {

t1 = this.triangles[index-1].position;

}

t2 = triangle.position;

const gradient = context.createLinearGradient(t1.x, t1.y, t2.x, t2.y);

gradient.addColorStop(0, 'rgba(235, 235, 250, 0.5)');

gradient.addColorStop(0.5, 'rgba(235, 235, 250, 0)');

gradient.addColorStop(1, 'rgba(235, 235, 250, 0.5)');

context.beginPath();

context.strokeStyle = gradient;

context.moveTo(t1.x, t1.y);

context.lineTo(t2.x, t2.y);

context.stroke();

context.closePath();

triangle.render();

});

}

}

class Triangle {

constructor(position, alpha, size, color) {

this.position = position;

this.size = 0;

this.maxSize = size/3 + 2*size/3*Math.random();

this.color = color;

this.alpha = alpha;

this.angle = 0;

}

render() {

this.angle += Math.PI/24;

context.save();

context.translate(this.position.x, this.position.y);

context.rotate(this.angle + this.alpha);

context.fillStyle = this.color;

context.beginPath();

context.moveTo(0, -this.size/2);

context.lineTo(-this.size/2 ,this.size/2);

context.lineTo(this.size/2 ,this.size/2);

context.closePath();

context.fill();

context.restore();

}

}

let circles = [];

for(let i = 0; i <= 12; i++) {

circles.push(new Circle({x: Bounds.width/2, y: Bounds.height/2}, 160+(160*Math.random())-80, colors[(i+1)%colors.length], Math.PI * Math.random()));

}

function loop() {

context.clearRect(0, 0, Bounds.width, Bounds.height);

circles.forEach((circle, index) => {

circle.render();

setTimeout(() => circle.update(), 0);

});

requestAnimationFrame(loop);

}

loop();

window.onresize = () => {

Bounds.width = window.innerWidth;

Bounds.height = window.innerHeight;

canvas.width = Bounds.width;

canvas.height = Bounds.height;

circles = [];

for(let i = 0; i <= 12; i++) {

circles.push(new Circle({x: Bounds.width/2, y: Bounds.height/2}, 160+(160*Math.random())-80, colors[(i+1)%colors.length], Math.PI * Math.random()));

}

}