参考别的博主写的,自己发只是为了方便以后自己找资源
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<style>
canvas {
box-shadow: -2px -2px 5px #3f5ab1, 2px 2px 5px #3fb15b;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="580px" height="580px"></canvas>
</body>
<script>
let canvas = document.getElementById("mycanvas");
let context = canvas.getContext('2d');
context.strokeStyle = '#000';
context.lineWidth = '2';
function drawChessBoard() {
for (let i = 0; i < 19; i++) {
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 555);
context.stroke();
context.moveTo(15, 15 + i * 30);
context.lineTo(555, 15 + i * 30);
context.stroke();
}
}
drawChessBoard();
canvas.onclick = function (e) {
let x = e.clientX - 5;
let y = e.clientY - 5;
console.log(x + ',' + y)
let i = Math.floor(x / 30);
let j = Math.floor(y / 30);
console.log(i + ',' + j)
context.beginPath();
context.fillStyle = '#000';
context.arc(i * 30 + 15, j * 30 + 15, 10, 0, 2 * Math.PI, true);
context.closePath();
context.stroke();
context.fill();
}
</script>
</html>