HTML5特效展示，夢幻星空

2024-09-05 12:17:10

字體：大中小

來源：轉載

供稿：網友

HTML5特效展示，夢幻星空，由于使用了html5，請使用支持html5的瀏覽器查看，源碼可以直接查看。嚴格來說是用了HTML5中的canvas，所以需要支持html5的瀏覽器(Chrome,Firefox, IE9+)。

<html><head><title>星空</title><META http-equiv="X-UA-Compatible" content="IE=edge"></META><META http-equiv="Content-Type" content="text/html; charset=gb2312"/><script>var BW = 800; //canvas widthvar BH = 600; //canvas heightvar MAX_STAR_SIZE = 3;		var MAX_STAR_SPEED = 1;		var STAR_COUNT = 120;		var BGCOLOR = "black";		var ctx;		var stars = [];				function rndf(n){			return Math.floor(Math.random()*n);		}				function rndc(n){			return Math.ceil(Math.random()*n);		}				function Star(){			this.reset = function(){				this.x = 0;				this.y = rndf(BH);				this.size = rndc(MAX_STAR_SIZE);				this.vx = MAX_STAR_SPEED*this.size/MAX_STAR_SIZE;				this.vy = 0;				this.color = "rgba("+rndf(255)+", "+rndf(255)+", "+rndf(255)+", 0.5)";			};						this.reset();			this.x = rndf(BW);		}		function render(){			ctx.globalCompositeOperation = "source-over";			ctx.fillStyle = "rgba(0, 0, 0, 0.3)";			ctx.fillRect(0, 0, BW, BH);			ctx.globalCompositeOperation = "lighter";			for(var i = 0; i < STAR_COUNT; ++i){				var p = stars[i];				ctx.beginPath();				var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);				gradient.addColorStop(0, "white");				gradient.addColorStop(0.4, "white");				gradient.addColorStop(0.4, p.color);				gradient.addColorStop(1, "black");				ctx.fillStyle = gradient;				ctx.arc(p.x, p.y, p.size, Math.PI*2, false);				ctx.fill();				p.x += p.vx;				p.y += p.vy;								if(p.x<=0 || p.x>=BW || p.y<=0 || p.y>=BH){					p.reset();				}			}		}		function init(){			if (!window.console){				console = {log:function(){},debug:function(){}};			}			//create canvas			var cv = document.createElement('canvas');			cv.width = BW;			cv.height = BH;			cv.style.background = BGCOLOR;			document.body.appendChild(cv);			ctx = cv.getContext("2d");			//create all stars			for(var i=0;i<STAR_COUNT;++i){				var s = new Star();				stars.push(s);			}			setInterval(render, 33);		};			</script>	</head>	<body onload="init()">	</body></html>

上一篇：CSS圖片濾鏡效果+代碼

下一篇：火狐下使用after偽類來模擬省略號