编写一个页面,在画布上绘制一个8行16列的等间距方格矩阵,手部画过的方格变成红色,
时间: 2023-11-22 08:55:46 浏览: 57
python实现在一个画布上画多个子图
可以使用HTML5的canvas元素和JavaScript来实现。以下是一个基本的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>绘制方格矩阵</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="320" height="160"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制矩形函数
function drawRect(x, y, width, height, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
// 初始化矩阵
var matrix = [];
for (var i = 0; i < 8; i++) {
matrix[i] = [];
for (var j = 0; j < 16; j++) {
matrix[i][j] = false; // 初始状态为未绘制
}
}
// 绑定鼠标点击事件
canvas.addEventListener("click", function(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
var i = Math.floor(y / 20); // 行数
var j = Math.floor(x / 20); // 列数
if (!matrix[i][j]) { // 如果未绘制,则绘制红色矩形
drawRect(j * 20, i * 20, 20, 20, "red");
matrix[i][j] = true; // 标记为已绘制
}
});
// 绘制初始矩阵
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 16; j++) {
drawRect(j * 20, i * 20, 20, 20, "white");
}
}
</script>
</body>
</html>
```
代码解释:
1. 在HTML中定义了一个canvas元素,并在JavaScript中获取了它的上下文对象ctx。
2. 定义了一个绘制矩形的函数drawRect,可以用于绘制红色和白色的方格。
3. 初始化一个8行16列的矩阵matrix,用于记录每个方格是否已经绘制过。
4. 绑定了canvas的鼠标点击事件,当用户点击一个方格时,先计算出其所在的行和列,然后判断该方格是否已经绘制过,如果未绘制,则绘制红色方格并标记为已绘制。
5. 最后,使用两重循环绘制出初始的16x8的白色方格矩阵。
阅读全文