原文地址：http://www.oschina.net/code/snippet_100646_6176
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>star</title>
<script type="text/javascript">
window.onload = function () {
main();
}
function main(e)
{
j = document;
d = j.getElementById("c");
c = d.getContext("2d");
MyCos = Math.cos;
MySin = Math.sin;
W = d.width = window.innerWidth;
H = d.height = window.innerHeight;
c.fillRect(0, 0, W, H);
c.globalCompositeOperation = "lighter";
c.lineWidth = 0.2;
c.lineCap = "round";
X = W / 2;
Y = H / 2;
RadiousA = 100;
RadiousB = 1;
AngleA = 0;
BeginA = 0;
U = 0;
big = true;
a = 0;
b = 0;
x = X + RadiousA * MyCos(BeginA);
y = Y + RadiousA * MySin(BeginA);
d.onmousemove = function(e)
{
if(e)
{
X = e.x;
Y = e.y;
x = X + RadiousA * MyCos(BeginA);
y = Y + RadiousA * MySin(BeginA);
}
setInterval(f = function (e) {
c.save();
c.globalCompositeOperation = "source-over";
if(e!=1) {
c.fillStyle = "rgba(0,0,0,0.02)";
c.fillRect(0, 0, W, H);
}
c.restore();
AngleA = Math.acos(RadiousB / RadiousA) * 2;
i = 25; while(i --) {
c.beginPath();
BeginA += AngleA;
a = X + RadiousA * MyCos(BeginA);
b = Y + RadiousA * MySin(BeginA);
c.moveTo(x, y);
c.lineTo(a, b)
c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)";
c.stroke();
x = a;
y = b;
U += 0.1;
}
RadiousB += (big?1:-1);
RadiousA += (big?1:-1);
if(RadiousB >= Y)
{
big = false;
}
else if(RadiousB <= 100)
{
big = true;
}
}, 16);
};
d.onmousemove();
}
</script>
</head>
<body style="margin:0px;padding:0px;100%;height:100%;overflow:hidden;">
<canvas id="c"></canvas>
</body>
</html>
完