代码如下:
<!DOCTYPE html>
<html>
<head>
<title> ... </title>
<meta charset="utf-8"/>
<meta name="HSW" content="">
<meta name="Keywords" content="">
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
<script>
var canvas, ctx, ban, tim;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width = canvas.height = 400;
ctx.fillRect(0, 0, 400, 400);
ctx.strokeStyle = "rgb(0,0,0)";
main();
function main() {
var a, b, tx, ty;
ctx.globalCompositeOperation = "source-over";
tim = new Date().getTime() / 40;
ban = 0;
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, 400, 400);
b = 0;
a = Math.sin(tim / 73);
tx = 200 + Math.cos(-tim / 23) * 50 * a;
ty = 200 + Math.sin(-tim / 23) * 50 * a;
for (a = 0; a < 3; a++) {
rus(tx, ty, tim / 97 + b, 0.8, 1, 0);
b += Math.PI * 2 / 3;
}
requestAnimationFrame(main);
}
function rus(x, y, r, s, pm, kai) {
var a, b, c, d, e, px, py, max, bn;
ctx.globalCompositeOperation = "source-over";
ban++;
bn = ban;
max = 40;
c = 0.26 + Math.sin(tim / 37 + ban) * 0.13;
c *= 1 + Math.sin(tim / 73) / 5;
d = [];
for (a = 0; a < max; a++) {
b = (max - a) / max;
px = Math.cos(r);
py = Math.sin(r);
r += (1.4 - b * s) * c * pm;
d[a] = [px, py, x, y, b * s, r];
x += px * b * 10 * s;
y += py * b * 10 * s;
if (b * s < 0.07) break;
}
for (c = 0; c < 2; c++) {
if (c) {
e = 2;
ctx.fillStyle = "hsl(" + (kai * 17 + (tim % 360) | 0) + ",60%,70%)";
} else {
e = 6;
ctx.fillStyle = "hsl(" + (kai * 23 + (tim % 360) | 0) + ",60%,40%)";
}
ctx.beginPath();
for (a = 0; a < d.length; a++) {
b = d[a];
ctx[(a ? "line" : "move") + "To"](b[2] + b[1] * b[4] * e, b[3] - b[0] * b[4] * e);
}
for (a = d.length - 2; a >= 0; a--) {
b = d[a];
ctx.lineTo(b[2] - b[1] * b[4] * e, b[3] + b[0] * b[4] * e);
}
ctx.fill();
}
if (s > 0.41) {
for (a = 4; a < d.length; a += 10) {
b = d[a];
c = 0.5 + Math.sin(tim / 53 + a + ban * 67) / 2;
rus(b[2], b[3], b[5] - pm * c, b[4] * 1.02, pm * -1, kai + 1);
}
}
if (d[bn % 13] && bn % 4 == 3) {
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = "rgb(0,0,0)";
b = d[bn % 13];
ctx.fillStyle = "rgb(222,222,222)";
ctx.beginPath();
ctx.arc(b[2], b[3], 40 * b[4], 0, Math.PI * 2, false);
ctx.fill();
ctx.lineWidth = 1;
ctx.stroke();
if ((tim) % 3 > 1) {
ctx.fillStyle = "rgb(215,15,0)";
} else {
ctx.fillStyle = "rgb(0,15,215)";
}
c = Math.sin(bn + tim / 13) * 15 * b[4];
x = Math.cos(bn + tim / 41 * pm) * c;
y = Math.sin(bn + tim / 41 * pm) * c;
ctx.beginPath();
ctx.arc(b[2] + x, b[3] + y, 15 * b[4], 0, Math.PI * 2, false);
ctx.fill();
ctx.lineWidth = 2;
ctx.stroke();
ctx.fillStyle = "rgb(0,0,0)";
ctx.beginPath();
ctx.arc(b[2] + x * 1.1, b[3] + y * 1.1, 6 * b[4], 0, Math.PI * 2, false);
ctx.fill();
}
if (d[bn % 7] && bn % 7 == 4) {
ctx.fillStyle = "hsla(" + (kai * 17 + (tim % 360) | 0) + ",60%,90%,0.12)";
ctx.globalCompositeOperation = "lighter";
b = d[bn % 7];
for (a = 0; a < 4; a++) {
c = (a + 1) * 5 + 20;
ctx.beginPath();
ctx.moveTo(b[2], b[3]);
ctx.lineTo(b[2] + b[0] * 400 + b[1] * c, b[3] + b[1] * 400 - b[0] * c);
ctx.lineTo(b[2] + b[0] * 400 - b[1] * c, b[3] + b[1] * 400 + b[0] * c);
ctx.fill();
}
}
}
</script>
</html>