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

trytryba

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

阅读量252

点赞数

CC 4.0 BY-SA版权

文章标签：前端

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

本文链接：https://blog.youkuaiyun.com/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