<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
光线爆炸特效
</title>
<script src="jquery.js">
</script>
<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
body { background: #000; overflow: hidden; } canvas { display: block; }
</style>
</head>
<body>
<canvas id="c">
</canvas>
<script>
/*
click to clear and change hue
don't look at or judge this code
I just kept tweaking values and
adding random things in a messy way
it's full of magic numbers
*/
var c, ctx, w, h, cx, cy, branches, startHue, tick;
function rand(min, max) {
return Math.random() * (max - min) + min;
}
function randInt(min, max) {
return Math.floor(min + Math.random() * (max - min + 1));
};
function Branch(hue, x, y, angle, vel) {
var move = 15;
this.x = x + rand( - move, move);
this.y = y + rand( - move, move);
this.points = [];
this.angle = angle != undefined ? angle: rand(0, Math.PI * 1);
this.vel = vel != undefined ? vel: rand( - 4, 4);
this.spread = 0;
this.tick = 0;
this.hue = hue != undefined ? hue: 200;
this.life = 1;
this.decay = 0.0015;
this.dead = false;
this.points.push({
x: this.x,
y: this.y
});
}
Branch.prototype.step = function(i) {
this.life -= this.decay;
if (this.life <= 0) {
this.dead = true;
}
if (!this.dead) {
var lastPoint = this.points[this.points.length - 1];
this.points.push({
x: lastPoint.x + Math.cos(this.angle) * this.vel,
y: lastPoint.y + Math.sin(this.angle) * this.vel
});
this.angle += rand( - this.spread, this.spread);
this.vel *= 0.99;
this.spread = this.vel * 0.04;
this.tick++;
this.hue += 0.3;
} else {
branches.splice(i, 1);
}
};
Branch.prototype.draw = function() {
if (!this.points.length || this.dead) {
return false;
}
var length = this.points.length,
i = length - 1,
point = this.points[i],
lastPoint = this.points[i - randInt(5, 100)];
//jitter = 8;
if (lastPoint) {
var jitter = 2 + this.life * 6;
ctx.beginPath();
ctx.moveTo(lastPoint.x, lastPoint.y);
ctx.lineTo(point.x + rand( - jitter, jitter), point.y + rand( - jitter, jitter));
ctx.lineWidth = 1;
var alpha = this.life * 0.075;
ctx.strokeStyle = 'hsla(' + (this.hue + rand( - 10, 10)) + ', 70%, 40%, ' + alpha + ')';
ctx.stroke();
}
}
function init() {
c = document.getElementById('c');
ctx = c.getContext('2d');
startHue = 220;
branches = [];
reset();
loop();
}
function reset() {
w = window.innerWidth;
h = window.innerHeight;
cx = w / 2;
cy = h / 2;
branches.length = 0;
c.width = w;
c.height = h;
tick = 0;
for (var i = 0; i < 500; i++) {
branches.push(new Branch(startHue, cx, cy));
}
}
function step() {
var i = branches.length;
while (i--) {
branches[i].step(i)
}
tick++;
}
function draw() {
var i = branches.length;
if (tick < 450) {
ctx.save();
ctx.globalCompositeOperation = 'lighter';
ctx.globalAlpha = 0.002;
ctx.translate(cx, cy);
var scale = 1 + tick * 0.00025;
ctx.scale(scale, scale);
ctx.translate( - cx, -cy);
ctx.drawImage(c, rand( - 150, 150), rand( - 150, 150));
ctx.restore();
}
ctx.globalCompositeOperation = 'lighter';
while (i--) {
branches[i].draw()
}
}
function loop() {
requestAnimationFrame(loop);
step();
draw();
step();
draw();
}
window.addEventListener('resize', reset);
window.addEventListener('click',
function() {
startHue += 60;
reset();
});
init();
</script>
</body>
</html>
来源: http://www.w3cfuns.com/notes/36748/b3aa001495ee19c512d9310dcebad808.html