Question

在我的代码中：

var canvas = document.createElement('canvas');
canvas.width = 1600;
canvas.height = 900;
document.body.appendChild(canvas);

var similarX = 0;
var similarY = 0;

document.addEventListener('mousemove',function(event){

    similarX = event.clientX;
    similarY = event.clientY;
    document.getElementById('body').innerHTML = "x:" + similarX + ", y:" + similarY +", imgData:" + pixelData;
var pixelData = rect.getImageData(60, 60, 1, 1).data;
})


window.addEventListener('load' , start);

var c = canvas.getContext('2d')
var rect = canvas.getContext ('2d')
var circle = canvas.getContext ('2d')

function start() {
    c.clearRect(0, 0, 1600, 900);
    c.fillStyle = 'green' ;
    c.fillRect(similarX - 12, similarY - 50, 20, 20);
    rect.fillStyle = 'black';
    rect.fillRect(50,50,80,80);
    window.requestAnimationFrame(start)


}

document.body.appendChild(canvas);

我想检测绿色播放器正方形周围的像素是什么颜色，以便如果触摸黑盒，可以通过getImageData（）命令检测到它？我尝试阅读其他文章，但是找不到使用它们的方法。有没有可以轻松放入代码中的解决方案？

如何使用getImageData在JavaScript中实现颜色冲突？

0 个答案: