一个很炫的html5代码。。很简短但很炫。。。。

hellNo 2013-01-11 10:26:00

粘贴到txt里，然后保存成html运行一下看看，是不是很cool？？



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>

 <title>JS1k: Breathing Galaxies (1013 bytes)</title>

 <script type="text/javascript">

window.onload = function () {

	C = Math.cos; // cache Math objects

	S = Math.sin;

	U = 0;

	w = window;

	j = document;

	d = j.getElementById("c");

	c = d.getContext("2d");

	W = d.width = w.innerWidth;

	H = d.height = w.innerHeight;

	c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)

	c.globalCompositeOperation = "lighter"; // switch to additive color application

	c.lineWidth = 0.2;

	c.lineCap = "round";

	var bool = 0, 

		t = 0; // theta

	d.onmousemove = function (e) {

		if(window.T) {

			if(D==9) { D=Math.random()*15; f(1); }

			clearTimeout(T);

		}

		X = e.pageX; // grab mouse pixel coords

		Y = e.pageY;

		a=0; // previous coord.x

		b=0; // previous coord.y 

		A = X, // original coord.x

		B = Y; // original coord.y

		R=(e.pageX/W * 999>>0)/999;

		r=(e.pageY/H * 999>>0)/999;

		U=e.pageX/H * 360 >>0;

		D=9;

		g = 360 * Math.PI / 180;

		T = setInterval(f = function (e) { // start looping spectrum

			c.save();

			c.globalCompositeOperation = "source-over"; // switch to additive color application

			if(e!=1) {

				c.fillStyle = "rgba(0,0,0,0.02)";

				c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)

			}

			c.restore();

			i = 25; while(i --) {

				c.beginPath();

				if(D > 450 || bool) { // decrease diameter

					if(!bool) { // has hit maximum

						bool = 1;

					}

					if(D < 0.1) { // has hit minimum

						bool = 0;

					}

					t -= g; // decrease theta

					D -= 0.1; // decrease size

				}

				if(!bool) {

					t += g; // increase theta

					D += 0.1; // increase size

				}

				q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)

				x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); // center on xy coords

				y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));

				if (a) { // draw once two points are set

					c.moveTo(a, b);

					c.lineTo(x, y)

				}

				c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid

				c.stroke();

				a = x; // set previous coord.x

				b = y; // set previous coord.y

			}

			U -= 0.5; // increment hue

			A = X; // set original coord.x

			B = Y; // set original coord.y

		}, 16);

	}

	j.onkeydown = function(e) { a=b=0; R += 0.05 }

	d.onmousemove({pageX:300, pageY:290})

}



</script>

</head>

<body>

<canvas id="c"></canvas>

</body>

</html>