HTML5 Canvas制作数独游戏（三）

上篇已经实现了点选后给予显示，本篇就开始讲解如何往数独中填入数字。这里使用的是在数独右边区域展示1-9数字，选择数字后自动填入。
那这1-9数字也得画出来，那就需要第3块画布了。添加标签如下（当然这里的边框是不需要的，等画完这块区域后可以去掉）。

<div id="divC"><canvas id="canC" width="60" height="540" style="border: 2px green solid;"></canvas></div>

并将展示的1-9数字区域，固定在数独右侧。css样式如下。

#divC {
   
	position:absolute;
	left : 50%;
	margin:0 300px;
}

准备好后，就可以开始绘制了。先获取一个存储了数字1-9的数组。

function getAllNumArr(min, max){
   //获取1-9数字数组
	let arrA = [];
	for(let i = min, j = 0; i <= max; i++,j++){
   
		arrA[j] = i;//1-9顺序数组
	}
	return arrA;
}

然后竖向按顺序绘制1-9数字，并将底色设置成斑马线，好区分每个格子。

function drawAllNum(pen, w, h){
   //竖向绘制1-9数字
	pen.font = "30px 微软雅黑";
	pen.textAlign = "center";
	let arrA = getAllNumArr(1, 9)