Clarence-pan/test.html

## test.html
<!DOCTYPE html>
<html>
<!-- ![](http://ww1.sinaimg.cn/large/006Vei6ogy1fjvra56p89j312b0n044h.jpg) -->
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			overflow: hidden;
		}

		#myCanvas {
			border: 1px;
			background-color: lavenderblush;
		}

		.a {
			text-align: center;
			font-weight: bold;
			font-size: 17px;
			color: #787878;
			font-family: "Comic Sans MS", cursive;
		}

		.tou {
			font-size: 14px;
			text-align: center;
			color: #787878;
			font-family: "Comic Sans MS", cursive;
		}
	</style>
</head>

<body>
	<canvas id="myCanvas"></canvas>
</body>
<script type="text/javascript">
	//获取窗口宽高
	var w = window.innerWidth;
	var h = window.innerHeight;
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	//设置画布宽高与窗口宽高一样
	canvas.width = w;
	canvas.height = h;
	//随机数函数
	function fnRandom(min, max) {
		return parseInt((max - min) * Math.random() + min + 1)
	}
	function Round() {
		this.r = fnRandom(10, 30);
		this.diam = this.r * 2;
		//随机位置
		var x = fnRandom(0, canvas.width - this.r);
		this.x = x < this.r ? this.r : x;
		var y = fnRandom(0, canvas.height - this.r);
		this.y = y < this.r ? this.r : y
		//随机速度
		var speed = fnRandom(2, 4) / 10
		this.speedX = fnRandom(0, 4) > 2 ? speed : -speed;
		this.speedY = fnRandom(0, 4) > 2 ? speed : -speed;
		//颜色
		this.color = "orange";
	}
	Round.prototype.draw = function () {
		//绘制函数
		ctx.fillStyle = this.color;
		ctx.beginPath()
		ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
		ctx.closePath();
		ctx.fill();
	}
	Round.prototype.move = function () {
		this.x += this.speedX;
		if (this.x > canvas.width - this.r) {
			//				this.speedX*=-1;
			this.x = this.r
		} else if (this.x < this.r) {
			this.x = canvas.width - this.r
		}
		this.y += this.speedY;
		if (this.y > canvas.height - this.r) {
			//				this.speedY*=-1;
			this.y = this.r
		} else if (this.y < this.r) {
			this.y = canvas.height - this.r
		}
	}
	//使用Round
	var allRound = [];
	function initRound() {
		//初始化30个圆形对象,放到数组中
		for (var i = 0; i < 30; i++) {
			var obj = new Round();
			obj.draw();
			obj.move();
			allRound.push(obj);

		}
	}
	initRound();
	var dxdy = []
	function roundMove() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		//遍历所有的圆形对象,让对象自己重绘,移动
		for (var i = 0; i < allRound.length; i++) {
			var round = allRound[i];
			round.draw();
			round.move();
			dxdy[i] = {
				dx: round.x,
				dy: round.y
			};
			var dx = dxdy[i].dx;
			var dy = dxdy[i].dy;
			for (var j = 0; j < i; j++) {
				var sx = dxdy[j].dx;
				var sy = dxdy[j].dy;
				l = Math.sqrt((dx - sx) * (dx - sx) + (dy - sy) * (dy - sy));
				var C = 1 / l * 7 - 0.009;
				var o = C > 0.03 ? 0.03 : C;
				ctx.strokeStyle = 'rgba(0,0,0,' + o + ')'
				// console.log(l);
				ctx.beginPath()
				ctx.lineWidth = 2;
				ctx.moveTo(dxdy[i].dx, dxdy[i].dy)
				ctx.lineTo(dxdy[j].dx, dxdy[j].dy);
				ctx.closePath()
				ctx.stroke()

			}
		}
		window.requestAnimationFrame(roundMove)
	}
	roundMove();
</script>

</html>

## 效果.md

      
    Raw
  

              效果.md
	<!DOCTYPE html>
	<html>
	<!-- ![](http://ww1.sinaimg.cn/large/006Vei6ogy1fjvra56p89j312b0n044h.jpg) -->
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	body {
	overflow: hidden;
	}

	#myCanvas {
	border: 1px;
	background-color: lavenderblush;
	}

	.a {
	text-align: center;
	font-weight: bold;
	font-size: 17px;
	color: #787878;
	font-family: "Comic Sans MS", cursive;
	}

	.tou {
	font-size: 14px;
	text-align: center;
	color: #787878;
	font-family: "Comic Sans MS", cursive;
	}
	</style>
	</head>

	<body>
	<canvas id="myCanvas"></canvas>
	</body>
	<script type="text/javascript">
	//获取窗口宽高
	var w = window.innerWidth;
	var h = window.innerHeight;
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	//设置画布宽高与窗口宽高一样
	canvas.width = w;
	canvas.height = h;
	//随机数函数
	function fnRandom(min, max) {
	return parseInt((max - min) * Math.random() + min + 1)
	}
	function Round() {
	this.r = fnRandom(10, 30);
	this.diam = this.r * 2;
	//随机位置
	var x = fnRandom(0, canvas.width - this.r);
	this.x = x < this.r ? this.r : x;
	var y = fnRandom(0, canvas.height - this.r);
	this.y = y < this.r ? this.r : y
	//随机速度
	var speed = fnRandom(2, 4) / 10
	this.speedX = fnRandom(0, 4) > 2 ? speed : -speed;
	this.speedY = fnRandom(0, 4) > 2 ? speed : -speed;
	//颜色
	this.color = "orange";
	}
	Round.prototype.draw = function () {
	//绘制函数
	ctx.fillStyle = this.color;
	ctx.beginPath()
	ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
	ctx.closePath();
	ctx.fill();
	}
	Round.prototype.move = function () {
	this.x += this.speedX;
	if (this.x > canvas.width - this.r) {
	// this.speedX*=-1;
	this.x = this.r
	} else if (this.x < this.r) {
	this.x = canvas.width - this.r
	}
	this.y += this.speedY;
	if (this.y > canvas.height - this.r) {
	// this.speedY*=-1;
	this.y = this.r
	} else if (this.y < this.r) {
	this.y = canvas.height - this.r
	}
	}
	//使用Round
	var allRound = [];
	function initRound() {
	//初始化30个圆形对象,放到数组中
	for (var i = 0; i < 30; i++) {
	var obj = new Round();
	obj.draw();
	obj.move();
	allRound.push(obj);

	}
	}
	initRound();
	var dxdy = []
	function roundMove() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	//遍历所有的圆形对象,让对象自己重绘,移动
	for (var i = 0; i < allRound.length; i++) {
	var round = allRound[i];
	round.draw();
	round.move();
	dxdy[i] = {
	dx: round.x,
	dy: round.y
	};
	var dx = dxdy[i].dx;
	var dy = dxdy[i].dy;
	for (var j = 0; j < i; j++) {
	var sx = dxdy[j].dx;
	var sy = dxdy[j].dy;
	l = Math.sqrt((dx - sx) * (dx - sx) + (dy - sy) * (dy - sy));
	var C = 1 / l * 7 - 0.009;
	var o = C > 0.03 ? 0.03 : C;
	ctx.strokeStyle = 'rgba(0,0,0,' + o + ')'
	// console.log(l);
	ctx.beginPath()
	ctx.lineWidth = 2;
	ctx.moveTo(dxdy[i].dx, dxdy[i].dy)
	ctx.lineTo(dxdy[j].dx, dxdy[j].dy);
	ctx.closePath()
	ctx.stroke()

	}
	}
	window.requestAnimationFrame(roundMove)
	}
	roundMove();
	</script>

	</html>