通过上一篇的讲解，应该对canvas有了初步想法吧。那接下来，我们就开始使用canvas绘制文字。先设置字体样式。

penA.font = "30px 微软雅黑";penA.textAlign = "center";

这里数独直接存储在9×9的二维数组中。先写一个固定的数组，后面再讲一个简单的算法。
数独在生成数据的时候，只显示部分数字。这里显示的数字就是具体值，不显示的数字由0代替。

let arr = [[3,0,2,0,0,0,9,8,5],[4,5,6,1,0,0,0,0,3],[0,8,9,2,0,0,0,0,0],[0,0,0,3,1,0,5,6,0],[6,0,0,7,0,5,0,0,0],[5,2,0,0,8,0,0,0,0],[0,0,0,0,0,7,0,0,0],[0,0,0,8,0,0,4,5,9],[2,9,0,5,0,0,0,0,0]];

添加绘制文字和底色的方法。

function drawBlock(pen, w, h, arr){//给每个方块填入数字及底色for(let i = 0; i < arr.length; i++){for(let j = 0; j < arr[i].length; j++){if(arr[i][j] != 0){//不为0时才绘制pen.fillStyle = "rgba(0, 0, 0, 0.06)";pen.fillRect(w/9*j, h/9*i, w/9, h/9);//绘制矩形底色pen.fillStyle = "black";pen.fillText(arr[i][j]+"", w/9*j+w/9/2, h/9*i+h/9/3*2);//绘制文字}}}}

调用方法。

drawBlock(penA, w, h, arr);//画方块及文字

运行代码后，效果如下。

现在就完成了最基本的数独显示了。
接下来就需要实现往小框中填值，在选择某个小框时，应该给予显示，让玩者体验感更好。（之前在这就碰到了问题。点击后直接使用填入矩形底色，但是再点击其他框时，之前绘制的仍然存在。如果清除上次点击绘制的那块区域，会把那一块全部清空（数字、底色及线框）。）
这里我使用了第二张画布，专门用来绘制点击后标识的选中框。
为了保证两块画布完全重叠，直接用相对定位来实现。HTML中标签变更如下。

<p id="p1"><p id="pA"><canvas id="canA" width="540" height="540"></canvas></p><p id="pB"><canvas id="canB" width="540" height="540"></canvas></p></p>

css样式变更如下。

<style type="text/css">#p1 {position:relative;}#pA,#pB {position:absolute;left : 50%;transform: translate3d(-50%, 0, 0)}</style>

这样画布B就准备好了。接下来就开始实现鼠标点击后显示选中框，具体代码如下。

//点击选中方块==>操作画布Blet penB = canB.getContext('2d');let lastXY = [];//记录上次点击的方块canB.onclick = function (e) {if(lastXY.length != 0){//清除上次绘制的方块penB.clearRect(w/9*lastXY[0], h/9*lastXY[1], w/9, h/9);}//绘制本次选中的块var e = event || window.event;let blocki = Math.floor(e.offsetX/(540/9));let blockj = Math.floor(e.offsetY/(540/9));penB.fillStyle = "rgba(255, 97, 0, 0.1)";penB.fillRect(w/9*blocki, h/9*blockj, w/9, h/9);lastXY = [blocki, blockj];//记录下来}

运行代码后，效果如下。

那本篇到这里就结束了。下一篇再讲解如何将需要的数字填入格子中。