在HTML5中,我們可以使用<canvas>
標(biāo)簽來(lái)繪制各種圖形,包括國(guó)際象棋棋盤。下面是一段實(shí)現(xiàn)國(guó)際象棋棋盤的HTML5代碼:
<canvas id="chessBoard" width="480" height="480"></canvas> <script> var canvas = document.getElementById("chessBoard"); var ctx = canvas.getContext("2d"); // 繪制棋盤背景 ctx.fillStyle = "#EBE2B7"; ctx.fillRect(0, 0, canvas.width, canvas.height); // 繪制棋盤方格 for (var i = 0; i < 8; i++) { for (var j = 0; j < 8; j++) { if ((i + j) % 2 === 0) { ctx.fillStyle = "#769656"; } else { ctx.fillStyle = "#EEC85E"; } ctx.fillRect(j * 60, i * 60, 60, 60); } } // 繪制棋盤邊框 ctx.beginPath(); ctx.strokeStyle = "#000000"; ctx.rect(0, 0, canvas.width, canvas.height); ctx.stroke(); </script>
以上代碼使用了<canvas>
標(biāo)簽和JavaScript來(lái)實(shí)現(xiàn)國(guó)際象棋棋盤的繪制。其中,我們先獲取了canvas元素和它的2D上下文對(duì)象,接著使用fillStyle
設(shè)置棋盤背景顏色,并使用fillRect
方法繪制背景。接下來(lái),我們使用兩個(gè)嵌套的for循環(huán)來(lái)繪制棋盤方格,如果該方格是黑色,則顏色為#769656
,否則為#EEC85E
。在循環(huán)結(jié)束后,我們使用beginPath
方法和rect
方法繪制棋盤的邊框。
以上就是使用HTML5和JavaScript實(shí)現(xiàn)國(guó)際象棋棋盤的代碼。如果你想在網(wǎng)頁(yè)中顯示國(guó)際象棋,可以將該代碼加以完善,添加棋子等功能。
上一篇li垂直居中 css
下一篇html5編寫php代碼