一个很简短但很炫的html5代码（canvas画布）。。。。。

最新推荐文章于 2025-04-13 09:47:41 发布

liu_bees

最新推荐文章于 2025-04-13 09:47:41 发布

阅读量1.1w

点赞数 11

分类专栏： JSP+HTML 文章标签： HTML 特效很炫

本文链接：https://blog.csdn.net/qq_26599807/article/details/86676895

版权

JSP+HTML 专栏收录该内容

26 篇文章

订阅专栏

最近在网上看到一个《一个很简短但很炫的html5代码》，特意收藏一下：

[鼠标移入，酷炫样式]

<!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>Breathing Galaxies (3005 bytes)</title>
<script type="text/javascript">
	window.onload = function() {
		var d = window.document.getElementById("_d");
		if (!d) {
			d = window.document.createElement("canvas");
			d.id = "_d";
			window.document.getElementsByTagName("BODY")[0]
					.appendChild(d);
		}

		C = Math.cos; // cache Math objects
		S = Math.sin;
		U = 0;
		w = window;
		j = document;
		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
			}, 18);
		}
		j.onkeydown = function(e) {
			a = b = 0;
			R += 0.05
		}
		d.onmousemove({
			pageX : 300,
			pageY : 290
		})
	}
</script>
</head>
<body style="padding: 0px !important; margin: 0px !important;">
</body>
</html>

纯HTML代码，纯js代码，效果很不错，装逼专用。