如何使用原生JS的clickEventListener实现Canvas红蓝颜色切换

问题根源 #

1. 错误使用event.length：你在点击事件里写的for(let i=0;i<event.length;i++)完全无效——event是MouseEvent对象，根本没有length属性，循环条件永远不成立，所以点击事件里的绘制逻辑一次都没执行过，你看到的红色是来自其他mousemove事件的绘制。
2. 逻辑误解：你试图用单次点击事件内的循环来实现多次点击的颜色切换，这是逻辑错误。每次点击是独立触发的事件，需要用外部变量记录点击次数，才能在每次点击时判断该用什么颜色。

修正后的代码 #

首先定义全局变量记录点击次数（确保在所有函数外定义）：

let clickCount = 0;
const ctx = canvas.getContext('2d');
const mouse = { x: 0, y: 0 };

保留你的绘制函数（也可以优化成一个函数传入颜色，这里先保留原结构）：

function drawBlueCircle(){
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(mouse.x,mouse.y,50,0,Math.PI *2);
    ctx.fill();
}

function drawRedCircle(){
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(mouse.x,mouse.y,50,0,Math.PI * 2);
    ctx.fill();
}

修改点击事件监听器：

canvas.addEventListener('click',function(event){
    // 修正坐标：把窗口坐标转成canvas内部坐标，避免偏移问题
    const rect = canvas.getBoundingClientRect();
    mouse.x = event.x - rect.left;
    mouse.y = event.y - rect.top;
    
    clickCount++;
    // 根据点击次数奇偶切换颜色
    clickCount % 2 === 1 ? drawBlueCircle() : drawRedCircle();
})

额外优化建议 #

如果希望每次点击只显示当前颜色的圆形（覆盖之前的），可以在绘制前添加清除画布的代码：

// 在drawBlueCircle和drawRedCircle开头添加
ctx.clearRect(0, 0, canvas.width, canvas.height);

或者直接把绘制逻辑合并成一个函数，减少重复代码：

function drawCircle(color) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(mouse.x,mouse.y,50,0,Math.PI *2);
    ctx.fill();
}

// 点击事件里改成
clickCount++;
drawCircle(clickCount % 2 === 1 ? 'blue' : 'red');

内容的提问来源于stack exchange，提问作者Tennz