HTML5棋盤

HTML5提供了很多新的元素和屬性，其中一個非常有用的元素就是<canvas>，它可以用來繪制圖形、動畫或者游戲。

使用<canvas>元素可以很方便地創建棋盤，下面是一個示例代碼：

<canvas id="chess-board" width="400" height="400"></canvas>

上面的代碼創建了一個<canvas>元素，并設置了它的寬度和高度為400像素。接下來，我們可以使用JavaScript來繪制棋盤：

var canvas = document.getElementById('chess-board');
var ctx = canvas.getContext('2d');
var row = 8;
var column = 8;
var tileSize = 50;
for (var r = 0; r < row; r++) {
for (var c = 0; c < column; c++) {
if ((r + c) % 2 == 0) {
ctx.fillStyle = 'rgb(200, 200, 200)';
} else {
ctx.fillStyle = 'rgb(100, 100, 100)';
}
ctx.fillRect(c * tileSize, r * tileSize, tileSize, tileSize);
}
}

上面的代碼首先獲取了id為“chess-board”的<canvas>元素，并創建了一個畫布上下文對象ctx。接下來，我們設置了棋盤的行數、列數和每個格子的大?。▎挝粸橄袼兀Ｈ缓螅覀兪褂脙蓚€嵌套的循環來繪制棋盤。在每個格子上使用fillRect方法填充顏色。

最終的結果是一個簡單的黑白交錯的棋盤：