canvas画田字格与米字格

最新推荐文章于 2023-11-13 09:40:14 发布

pvfhv

最新推荐文章于 2023-11-13 09:40:14 发布

阅读量4.1k

点赞数 2

分类专栏： HTML5 文章标签： canvas

本文链接：https://blog.csdn.net/pvfhv/article/details/3481031

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目中最近用到了canvas画图的功能，主要利用它来描绘字体，并描绘字体的笔划，动画实现。字体背景为田字格或米字格或图片，仅以田字格与米字格的画法小结供网友参考。主要用到canvas的画路径与描边、遮罩绘制的功能。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1 {
				width: 400px;
				height: 400px;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<canvas width="800" height="800" id="cs">你的浏览器不支持canvas!</canvas>
		</div>

		<script type="text/javascript">
			var oCanvas = document.getElementById('cs');

			if (oCanvas.getContext) {
				var ctx = oCanvas.getContext('2d'),
					l = 0,
					w = oCanvas.width,
					half = w / 2,
					span = 5; //每条虚线的实线部分长度为5

				ctx.strokeStyle = '#FF0000';
				ctx.lineWidth = 2;
				ctx.strokeRect(1, 1, w - 2, w - 2);
				
				//依次调用看效果!
				//drawReal(ctx);
				//drawUnReal(ctx);
				//drawUnRealNB(ctx);
				drawSimpleUnreal(ctx);
			}

			 //画实线
			function drawReal(ctx) {
				ctx.save();
				ctx.lineWidth = 1;
				ctx.beginPath();

				//横线
				ctx.moveTo(0, half);
				ctx.lineTo(w, half);

				//竖线
				ctx.moveTo(half, 0);
				ctx.lineTo(half, w);

				//交叉线1
				ctx.moveTo(0, 0);
				ctx.lineTo(w, w);

				//交叉线2
				ctx.moveTo(0, w);
				ctx.lineTo(w, 0);

				ctx.stroke();
				ctx.closePath();
				ctx.restore();
			}

			 //画虚线,兼容性没问题！
			function drawUnReal(ctx) {
				ctx.save();
				ctx.lineWidth = 1;
				ctx.beginPath();
				ctx.moveTo(0, half);
				l = w / 5; //横线路径
				for (var i = 0; i < l; i += 2) {
					ctx.lineTo(i * span, half);
					ctx.moveTo((i + 1) * span, half);
				}

				//竖线路径
				ctx.moveTo(half, 0);
				for (var i = 0; i < l; i += 2) {
					ctx.lineTo(half, i * span);
					ctx.moveTo(half, (i + 1) * span);
				}

				ctx.translate(half, half);
				ctx.rotate(45 * Math.PI / 180);

				ctx.moveTo(0, -half * Math.SQRT2);

				l = Math.ceil(w * Math.SQRT2 / 5);

				//交叉线1
				for (var i = 0; i < l; i += 2) {
					ctx.lineTo(0, -half * Math.SQRT2 + i * span);
					ctx.moveTo(0, -half * Math.SQRT2 + (i + 1) * span);
				}

				ctx.rotate(90 * Math.PI / 180);
				ctx.moveTo(0, -half * Math.SQRT2);

				//交叉线2
				for (var i = 0; i < l; i += 2) {
					ctx.lineTo(0, -half * Math.SQRT2 + i * span);
					ctx.moveTo(0, -half * Math.SQRT2 + (i + 1) * span);
				}

				//统一描边节省性能！
				ctx.stroke();
				ctx.restore();
			}

			 //画虚线——掏窟窿作法
			function drawUnRealNB(ctx) {
				drawReal(ctx);
				
				//画窟窿
				ctx.save();
				ctx.lineWidth = 1;
				ctx.beginPath();
				l = w / 5; //横线路径
				for (var i = 1; i < l; i += 2) {
					ctx.rect(i*span,half-2,span,3);
				}

				//竖线路径
				for (var i = 1; i < l; i += 2) {
					ctx.rect(half-2,i*span,3,span);
				}

				ctx.translate(half, half);
				ctx.rotate(45 * Math.PI / 180);

				l = Math.ceil(w * Math.SQRT2 / 5);

				//交叉线1
				for (var i = 1; i < l; i += 2) {
					ctx.rect(-2,-half * Math.SQRT2+i*span,3,span);
				}

				ctx.rotate(90 * Math.PI / 180);

				//交叉线2
				for (var i = 1; i < l; i += 2) {
					ctx.rect(-2,-half * Math.SQRT2+i*span,3,span);
				}
				ctx.restore();

				//进行掏窟窿
				ctx.clip();
				ctx.clearRect(0,0,w,w);				
			}
		
			//画虚线简单做法，有兼容性问题！
			function drawSimpleUnreal(ctx){
				ctx.save();
				ctx.lineWidth = 1;
				ctx.beginPath();
				
				//画布增强功能(注意兼容性，嵌入到ios safari4.3.3有问题！)http://msdn.microsoft.com/zh-cn/library/ie/dn265037(v=vs.85).aspx
				//IE11+/safari7+
				
				//ctx.setLineDash([12,3,3,3]); //创建12像素长，间隔为3像素 + 3像素长，间隔为3像素的点划线
				ctx.setLineDash([5,5]); //创建5像素长，间隔为5像素的虚线

				//横线
				ctx.moveTo(0, half);
				ctx.lineTo(w, half);

				//竖线
				ctx.moveTo(half, 0);
				ctx.lineTo(half, w);

				//交叉线1
				ctx.moveTo(0, 0);
				ctx.lineTo(w, w);

				//交叉线2
				ctx.moveTo(0, w);
				ctx.lineTo(w, 0);

				ctx.stroke();
				ctx.closePath();
				ctx.restore();
			}
		</script>
	</body>

</html>