canvas流星创作小例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="s"></canvas>
		<script>
			var aa = document.getElementById("s");
			var canvas = aa.getContext("2d");
			aa.width = window.innerWidth;
			aa.height = window.innerHeight;
			aa.style.background = "#000000";
			var n1;
			var n2;
		

			n1 = Math.floor(Math.random() * (window.innerWidth - 100 + 1) + 100);//100-window.innerwidth之间的随机数

			n2 = Math.floor(Math.random() * (window.innerHeight - 60 + 1) + 60);//60-window.innerwidth之间的随机数

			var x = n1; //x
			var y = n2;
			var x1 = n1 - 80;
			var y1 = n2 + 80; //y1	

			//画月亮
			function moon() {

				canvas.fillStyle = "white";
				canvas.strokeStyle = "white";
				canvas.arc(100, 30, 25, 0, Math.PI * 2, false);
				canvas.stroke();
				canvas.fill();

			}
			moon();

			var count = 0

			function me() {
				// aa.style.zIndex="-1";
				canvas.clearRect(0, 60, window.innerWidth, window.innerHeight);
				var col = canvas.createLinearGradient(x, y, x1, y1); //让渐变的颜色跟画出的流星一致
				col.addColorStop(0, "black");
				col.addColorStop(1, "white");
				canvas.beginPath();
				canvas.lineWidth = 2.8;
				canvas.strokeStyle = col;
				canvas.moveTo(x, y);
				canvas.lineTo(x1, y1);
				canvas.stroke();

				//requestAnimationFrame的执行速度
				x = x - 6;
				y = y + 6;
				x1 = x1 - 6;
				y1 = y1 + 6;
				requestAnimationFrame(me); //回调函数，可以解决卡顿						

				if (y > window.innerHeight) {
					var n1 = Math.round(Math.random() * window.innerWidth);
					var n2 = Math.round(Math.random() * window.innerHeight);
					if (n1 > 100 && n2 > 60) {
						x = n1; //x
						y = n2;
						x1 = n1 - 80;
						y1 = n2 + 80; //y1	
					}
				}
			}

			me()
		</script>
	</body>
</html>
觉得有帮助的希望支持一下
canvas流星创作小例子

悦读
