使用画布上的getImageData进行JavaScript颜色检测

getImageData函数有问题。我正在尝试制作一个程序，当你点击红色时，它会检测并弹出一个警告框。我已经编写了一个名为“collideTest”的碰撞检测函数，虽然我找不到它有任何问题，但它不起作用。我已经包括了下面的全部代码，将其分为几个部分，以便更友好地阅读

(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

//========================= B E G I N =======================================

window.onload = function init() {

    var canvas = document.getElementById("canvas");
    var c = canvas.getContext("2d");

    canvas.width = 600;
    canvas.height = 600;

    render();
}

//======================== O B J E C T S =====================================

var player = {
    x: 50,
    y: 50,
    xvel: 0,
    yvel: 0,
}

//===================== I N P U T & A D J U S T ============================

var keys = [];

window.addEventListener("keydown",function(e) {
    keys[e.keyCode] = true;
});

window.addEventListener("keyup",function(e) {
    keys[e.keyCode] = false;
});

function input() {

    if (keys[37]) {
        player.xvel -= 5
    }
    if (keys[39]) {
        player.xvel += 5
    }
    if (keys[38]) {
        player.yvel -= 5
    }
    if (keys[40]) {
        player.yvel += 5
    }

    player.x += player.xvel;
    player.y += player.yvel;

    player.xvel = 0;
    player.yvel = 0;

    collideTest();

}

//======================= C O L L I S I O N ================================

function collideTest(){
    var canvas = document.getElementById("canvas");
    var c = canvas.getContext("2d");
    var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60);
    for (var i = 0; i < whatColor.data.length; i += 4) {
        if (whatColor.data[i] == 255) {
            alert("red");
        }
    }
}

//========================== R E N D E R ===================================

function render(){

    var canvas = document.getElementById("canvas");
    var c = canvas.getContext("2d");

    canvas.width = 600

    input();

    c.fillStyle = "red"
    c.fillRect(300,300,50,50);

    c.fillStyle = "rgb(106,8,136)"
    c.fillRect(player.x,player.y,50,50)

    requestAnimationFrame(render);
}

（函数（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
})();
//===========================================B E G I N=======================================
window.onload=函数init（）{
var canvas=document.getElementById（“canvas”）；
var c=canvas.getContext（“2d”）；
画布宽度=600；
帆布高度=600；
render（）；
}
//=================================O B J E C T S=====================================
变量播放器={
x:50，
y:50，
xvel:0，
伊维尔：0，
}
//=================================I N P U T&A D J U S T============================
var键=[]；
window.addEventListener（“向下键”，函数（e）{
键[e.keyCode]=真；
});
window.addEventListener（“键控”，函数（e）{
密钥[e.keyCode]=假；
});
函数输入（）{
如果（键[37]）{
player.xvel-=5
}
如果（键[39]）{
player.xvel+=5
}
如果（键[38]）{
player.yvel-=5
}
如果（键[40]）{
player.yvel+=5
}
player.x+=player.xvel；
player.y+=player.yvel；
player.xvel=0；
player.yvel=0；
碰撞试验（）；
}
//========================================C O L I S O N================================
函数测试（）{
var canvas=document.getElementById（“canvas”）；
var c=canvas.getContext（“2d”）；
var whatColor=c.getImageData（player.x-5，player.y-5,60,60）；
对于（变量i=0；i

当我将collideTest（）中的“255”替换为“0”时，它会一次又一次地弹出警报，因此它不会/完全/被破坏。我只是不知道发生了什么

---

谢谢你的帮助

你的计算是正确的。只需将render（）函数内部的input（）调用移动到两个矩形创建之间：

c.fillStyle = "red"
c.fillRect(300,300,50,50);

input()

c.fillStyle = "rgb(106,8,136)"
c.fillRect(player.x,player.y,50,50)

获取图像数据将获得整个画布的快照，因此，如果每次都在红色上方绘制紫色，则在检测到的坐标处始终是紫色

---

我是否可以建议使用console.log（）来显示结果，而不是alert（）？；）

非常感谢！！我一整天都在为这个挣扎，哈哈。