通過上一篇的講解，應該對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中標簽變更如下。

<div id="div1"><div id="divA"><canvas id="canA" width="540" height="540"></canvas></div><div id="divB"><canvas id="canB" width="540" height="540"></canvas></div> </div>

css樣式變更如下。

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

這樣畫布B就準備好了。接下來就開始實現鼠標點擊后顯示選中框，具體代碼如下。

//點擊選中方塊==>操作畫布B let 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];//記錄下來 }

運行代碼后，效果如下。

那本篇到這里就結束了。下一篇再講解如何將需要的數字填入格子中。

總結

以上是生活随笔為你收集整理的HTML5 Canvas制作数独游戏（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。