使用js在canvas中绘制田字格完整代码

六月初六月初 JavaScipt 2023-06-04 20:17:07

田字格的应用使学习初期组成的一部分,可以说是我们初期学习就是伴随着的田字格的存在.如此应用频繁的田字格,如果需要通过代码实现要如何操作呢?

本文介绍js基于canvas实现绘制田字格效果,效果如图:


本站还提供绘制米字格效果代码,如需要查看米字格绘制.本站搜索"js使用canvas绘制米字格完整代码"

田字格绘制完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#divBox {
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="divBox">
			<canvas width="100" height="100" id="canvasID">你的浏览器不支持canvas!</canvas>
		</div>
		<script type="text/javascript">
			var oCanvas = document.getElementById('canvasID');
			if (oCanvas.getContext) {
				var ctx = oCanvas.getContext('2d'); //每条虚线的实线部分长度为5
				drawSimpleUnreal(ctx);
			}
			function drawSimpleUnreal(ctx){
				var w = oCanvas.width,
					half = w / 2;
				ctx.strokeStyle = '#FF0000';
				ctx.lineWidth = 2;
				ctx.strokeRect(1, 1, w - 2, w - 2);
				ctx.save();
				ctx.lineWidth = 1;
				ctx.beginPath();
				ctx.setLineDash([5,5]); //创建5像素长，间隔为5像素的虚线
				//横线
				ctx.moveTo(0, half);
				ctx.lineTo(w, half);
				//竖线
				ctx.moveTo(half, 0);
				ctx.lineTo(half, w);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
			}
		</script>
	</body>
</html>

运行上方代码,即可得到如图效果.

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！