HTML5棋盤(pán)

HTML5提供了很多新的元素和屬性，其中一個(gè)非常有用的元素就是<canvas>，它可以用來(lái)繪制圖形、動(dòng)畫(huà)或者游戲。

使用<canvas>元素可以很方便地創(chuàng)建棋盤(pán)，下面是一個(gè)示例代碼：

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

上面的代碼創(chuàng)建了一個(gè)<canvas>元素，并設(shè)置了它的寬度和高度為400像素。接下來(lái)，我們可以使用JavaScript來(lái)繪制棋盤(pán)：

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>元素，并創(chuàng)建了一個(gè)畫(huà)布上下文對(duì)象ctx。接下來(lái)，我們?cè)O(shè)置了棋盤(pán)的行數(shù)、列數(shù)和每個(gè)格子的大小（單位為像素）。然后，我們使用兩個(gè)嵌套的循環(huán)來(lái)繪制棋盤(pán)。在每個(gè)格子上使用fillRect方法填充顏色。

最終的結(jié)果是一個(gè)簡(jiǎn)單的黑白交錯(cuò)的棋盤(pán)：