网格

最新推荐文章于 2019-09-04 23:22:00 发布

大怪兽0110

最新推荐文章于 2019-09-04 23:22:00 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/hyf1712011164/article/details/84660415

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			canvas {
				border: 1px solid black;
			}
		</style>
	</head>

	<body>
		<canvas width="400" height="400"></canvas>
		<script>
			var myCanvas = document.querySelector('canvas');
			var ctx = myCanvas.getContext('2d');
			var gridSize = 13;
			var canvasHeight = ctx.canvas.height;
			var canvasWidth = ctx.canvas.width;
			var xLineTotal = Math.floor(canvasHeight / gridSize);
			var xLineTotal = Math.floor(canvasHeight / gridSize);
			for(var i = 0; i <= xLineTotal; i++) {
				ctx.beginPath();
				ctx.moveTo(0, i * gridSize - 0.5);
				ctx.lineTo(canvasWidth, i * gridSize - 0.5);
				ctx.stroke();
			}
			var yLineTotal = Math.floor(canvasWidth / gridSize);
			for(var i = 0; i <= yLineTotal; i++) {
				ctx.beginPath();
				ctx.moveTo(i * gridSize - 0.5, 0);
				ctx.lineTo(i * gridSize - 0.5, canvasHeight);
				ctx.strokeStyle = 'black';
				ctx.stroke();
			}
		</script>
	</body>

</html>