【canvas画棋盘精简版】_canvas绘制象棋盘-CSDN博客

本文链接：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