JavaScript如何仅修改位置绘制多个正方形 点击按钮绘图异常排查

核心问题梳理 #

• ctx.rect()参数规则为(x坐标, y坐标, 宽度, 高度)，你当前设置宽度为9、高度为100，宽高数值不一致，所以生成的是长矩形，正方形需要保证宽高数值相等。
• 你在for循环中重复给按钮绑定了21次点击事件，点击一次按钮会同时触发21次绘制逻辑，不符合「每次点击生成一个方块」的需求。
• 偏移量逻辑错误，不需要用for循环预生成偏移值，单独维护一个全局的x轴偏移变量，每次点击后累加即可。

修正后可运行代码 #

let addBlock = document.getElementById('addBlock')
var c = document.getElementById('canvas1');
var ctx = c.getContext("2d");
// x轴偏移量，初始为0，每次点击后累加
let xOffset = 0;
// 仅绑定一次点击事件
addBlock.addEventListener('click', function(){
    ctx.beginPath();
    // 宽高均设为10，保证是正方形；x轴位置随xOffset偏移
    ctx.rect(10 + xOffset, 20, 10, 10);
    ctx.fill();
    // 每次点击偏移15（10的宽度+5的间距，可自行调整数值）
    xOffset += 15;
})

内容的提问来源于stack exchange，提问作者Sola.SA