如何调试Canvas代码实现点击后自动铺满彩色矩形墙？

问题描述 #

需要实现Canvas铺砖功能：点击画布任意位置后，从该位置开始绘制宽100px、高50px的随机彩色矩形，先向右依次绘制，当矩形超出画布边界后，换行到上方一行（x重置为0，y减去矩形高度）继续绘制，直到铺满整个Canvas。

当前代码存在的问题：点击后仅在初始点击位置重复绘制矩形（仅颜色变化），不会自动移动位置铺满画布。

问题根源 #

1. 位置变量未持久化：每次调用addBrick时传入的x和y都是初始点击的固定值，函数内部修改的是局部变量，无法传递到下一次调用，导致每次都在同一位置绘制。
2. 换行逻辑错误：原代码在每次绘制后都会尝试向上移动y坐标，不符合"先铺满当前行再换行"的需求。

修正后的完整代码 #

JavaScript代码 #

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 500;

let timerId;
const brickWidth = 100;
const brickHeight = 50;
// 维护当前绘制的位置（闭包变量，避免全局污染）
let currentX, currentY;

function lineMessage(msg) {
    document.querySelector('#myMessage').textContent += msg;
}

function groupMessage(msg) {
    document.querySelector('#myMessage').innerHTML += msg + '<br/>';
}

canvas.addEventListener('click', createWall, true);

function createWall(event) {
    // 清除之前的定时器，避免重复触发
    if (timerId) clearInterval(timerId);
    
    let xClick = event.x;
    let yClick = event.y;

    xClick -= canvas.offsetLeft;
    yClick -= canvas.offsetTop;

    // 将初始点击位置转为网格对齐的坐标（可选，让矩形从网格起点开始）
    currentX = Math.floor(xClick / brickWidth) * brickWidth;
    currentY = Math.floor(yClick / brickHeight) * brickHeight;

    timerId = setInterval(addBrick, 100);
}

function addBrick() {
    // 生成随机十六进制颜色，补全6位避免格式错误
    let randomColor = Math.floor(Math.random() * 16777215).toString(16);
    while (randomColor.length < 6) randomColor = '0' + randomColor;
    let color = "#" + randomColor;

    ctx.beginPath();
    // 绘制向下的矩形（若需向上绘制，保持-*brickHeight即可）
    ctx.rect(currentX, currentY, brickWidth, brickHeight);

    ctx.fillStyle = color;
    ctx.fill();

    ctx.lineWidth = 1;
    ctx.strokeStyle = "black";
    ctx.stroke();

    // 更新下一个绘制位置
    currentX += brickWidth;
    // 检查是否超出画布右侧，触发换行
    if (currentX + brickWidth > canvas.width) {
        currentX = 0;
        currentY -= brickHeight;
    }

    // 停止条件：当y坐标超出画布顶部时清除定时器
    if (currentY - brickHeight < 0) {
        clearInterval(timerId);
        timerId = null;
    }
}

CSS代码 #

#canvas {
    width: 1000px;
    height: 500px;
    border: solid black 1px;
}

#myConsole {
    background-color: black;
    color: white;
    min-height: 100px;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Christian Davis">
    <link rel="stylesheet" href="styles.css">
    <title>Brick Layer</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <p id="myConsole">&gt;&nbsp;<span id="myMessage"></span></p>
    <script src="app.js"></script>
</body>
</html>

关键修改说明 #

• 位置持久化：用闭包变量currentX和currentY维护当前绘制位置，每次绘制后更新，确保下一次绘制使用新坐标。
• 修正换行逻辑：仅当当前x坐标超出画布右侧时才重置x为0并向上移动y，否则仅向右推进x，符合"先铺行再换行"的需求。
• 添加停止条件：当y坐标超出画布顶部时自动清除定时器，终止绘制。
• 颜色格式修复：补全随机生成的十六进制颜色为6位，避免出现无效颜色。
• 重复点击处理：点击画布时先清除之前的定时器，防止多个绘制任务同时运行。

内容的提问来源于stack exchange，提问作者That New Coder