【canvas画棋盘精简版】

trytryba

已于 2022-06-29 14:03:52 修改

阅读量360

点赞数 1

文章标签：前端 html css

于 2022-06-28 15:49:03 首次发布

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

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、废话少说，直接上代码
总结

在这里插入图片描述

前言

程序中需要用一个中国象棋的棋盘，直接放图片，大小有１０多Ｋ，再压缩就不清楚了，想到用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="canvas" width="593" height="627"></canvas>
		<script>
			let canvas = document.getElementById('canvas')
			let ctx = canvas.getContext('2d')
			let w_b=564, h_b=598        //棋盘的宽和高board
			let w_c=70, h_c=66          //格的宽和高cell
			drawBoard()
			function drawBoard(){
			    //画外边框
				ctx.lineWidth = 4
				ctx.strokeRect(10,10,w_b+9,h_b+9)
				//画小方格
				for (let i=0; i<= 8; i++){
					for (let j=0; j<=7;j++ ){
						if (i!=4){
							ctx.lineWidth = 2
							ctx.strokeRect((w_c*j + w_c/2+16)-w_c/2, (h_c * i + h_c/2+16)-h_c/2, w_c, h_c)
						}
					}
				}
				// 绘制上下的X
				let a_l=[[3,0,5,2],[5,0,3,2],[3,9,5,7],[5,9,3,7]]  //[x1,y1,x2,y2]为每条斜线两个端点下标：第几条纵线与第几条横线交点。
				for (let i in a_l)
				{
				    ctx.beginPath()
					ctx.moveTo(a_l[i][0]*w_c+16, a_l[i][1]*h_c+16)
					ctx.lineTo(a_l[i][2]*w_c+16, a_l[i][3]*h_c+16)
					ctx.lineWidth = 2
					ctx.stroke()
				}
				//画卒和炮位置的小直角,[x,y]为卒和炮位置下标。
				let a_i=[[1,2],[7,2],[0,3],[2,3],[4,3],[6,3],[8,3],
						 [0,6],[2,6],[4,6],[6,6],[8,6],[1,7],[7,7]];
				for (let k in a_i){
					draw_angle(a_i[k][0]*w_c+16,a_i[k][1]*h_c+16,10,w_b+10)
				}
				//画中间文字
				ctx.font = '40px Verdana'
				ctx.fillText('楚河', 80, 330)
				ctx.translate(510, 300) //重新映射画布上的（x,y）位置
				ctx.rotate(180 * Math.PI / 180) // 旋转当前绘图:旋转 180 度，可规定下面的公式：180*Math.PI/180
				ctx.fillText('漢界', 0, 0)
			}

            //画小直角，x、y为中心点坐标,min_x:棋盘左边坐标，max_x:棋盘右边坐标
			function draw_angle(x,y,min_x,max_x){
				ctx.beginPath()
                if (x-14>min_x)	{          //如角线在左边线内
					ctx.moveTo(x-14, y-4)  //左上
					ctx.lineTo(x-4, y-4)
					ctx.lineTo(x-4, y-14) 
					ctx.moveTo(x-14, y+4)  //左下
					ctx.lineTo(x-4, y+4)
					ctx.lineTo(x-4, y+14)
                }
                if (x+14 < max_x){         //如角线在右连线内
					ctx.moveTo(x+4, y-14)  //右上
					ctx.lineTo(x+4, y-4)
					ctx.lineTo(x+14, y-4)
					ctx.moveTo(x+4, y+14)  //右下
					ctx.lineTo(x+4, y+4)
					ctx.lineTo(x+14, y+4)
				}
				ctx.lineWidth = 2
				ctx.stroke()
			}
		</script>
	</body>
</html>