HTML5 Canvas制作数独游戏（一）

VIP文章小咪咪咪咪

已于 2022-09-01 15:14:10 修改

阅读量1.5k

点赞数 3

文章标签： html5 游戏 javascript

于 2022-09-01 14:43:21 首次发布

本文链接：https://blog.csdn.net/shinian389789252/article/details/126638402

版权

初次接触Canvas，想做一个数独游戏，查找资料后开始着手实现。途中也遇到几个难点，也都克服了，实现了一个简单的版本，就想把过程写下来。水平有限，代码可能也有不完善的地方。
好了，废话不多说，现在开始。
Canvas使用，不需要任何插件之类的，就仅仅是HTML5支持的一个标签，所以第一步，就是写一个简单的HTML页面代码，并加入一个canvas标签。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>canvas数独</title>
</head>
<body>
	<canvas id="canA" width="540" height="540" style="border: 2px green solid;"></canvas>
</body>
</html>

这就加了一个canvas画布，当然这里显示的边框是不需要的，只是为了看下效果。一般添加一个透明的画布即可，长宽也可以在js代码中设置。
为了美观，这里将画布设为居中显示，左右居中即可。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>canvas数独</title>
	<style type="text/css">
		#canA {
   
			display:block;
			margin:0 auto;
			border:2px green solid;
		}
	</style>
</head>
<body>
	<canvas id="canA"