canvas画棋盘代码优化-追求最简

trytryba

已于 2022-12-22 07:01:43 修改

阅读量188

点赞数

文章标签：前端

于 2022-06-29 09:07:12 首次发布

本文链接：https://blog.csdn.net/trytryba/article/details/125513689

版权

昨天用canvas了个画棋盘，今天优化了一下,目前能做到的最简。

在这里插入图片描述

<!dOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>绘制象棋</title>
		<style>
			body {
				background-color: #C5C5C5;
			}
			canvas {
				position: fixed;
				background-color: #FFFFFF;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<canvas id="cvs" width="592" height="626"></canvas>
		<script>
			let cx = document.getElementById('cvs').getContext('2d')
			let w=560, h=594, wc=70, hc=66, m=16              //棋盘的宽w和高h,格的宽wc和高hc,m为边距margin
			cx.lineWidth = 4                   //画外边框
			cx.strokeRect(10,10,w+12,h+12)
			cx.lineWidth = 2
			draw('楚河')                       //画上上个半棋盘
			cx.translate(w+m,h+m)			   //重新设置坐标原点
			cx.rotate(180 * Math.PI / 180)     //旋转180度，画下个半棋盘
			draw('漢界') 
			function draw(t){
				cx.translate(m,m)
				//画小方格 ,半个棋盘，４行８列
				for (let i=0; i<4; i++){
					for (let j=0; j<8;j++ ){
						cx.strokeRect(wc*j, hc*i, wc, hc)
					}
				}
				// 绘制上下的X
				let aL=[[3,0,5,2],[5,0,3,2]]  //[x1,y1,x2,y2]为每条斜线两个端点下标：第几条纵线与第几条横线交点。
				for (let p of aL){
				    cx.beginPath()
					cx.moveTo(p[0]*wc, p[1]*hc)
					cx.lineTo(p[2]*wc, p[3]*hc)
					cx.stroke()
				}
				//画卒和炮位置的小直角,[x,y]为卒和炮位置下标。
				let aI=[[1,2],[7,2],[0,3],[2,3],[4,3],[6,3],[8,3]]
				for (let a of aI){
					d_a(a[0]*wc,a[1]*hc,0,w)
				}
				//画中间文字
				cx.font = '40px Verdana'
				cx.fillText(t, 64, (h+32)/2)				
			}

            //画小直角，x、y为中心点坐标,L:棋盘左边界坐标，R:棋盘右边界坐标
			function d_a(x,y,L,R){
				cx.beginPath()
				cx.translate(x,y)
				for (i=0;i<4 ;i++ ){
					cx.rotate(90 * Math.PI / 180)         //每次旋转90度，画一个直角
				    if ((x!=L)&&(i>1) || (x!=R)&&(i<2)){  //在棋盘内画
						cx.moveTo(-14, -4) 
						cx.lineTo(-4, -4)
						cx.lineTo(-4, -14)
					}
				}
				cx.stroke()
				cx.translate(-x,-y)
			}
		</script>
	</body>
</html>