Отслеживание наведения мыши на html5 холст

Question

Кто-нибудь знает, можно ли выполнить отслеживание цвета пикселей при наведении мыши с помощью html5 canvas, чтобы получить те же результаты в видео ниже?

пример отслеживания игрока при наведении курсора

Answer 1

Это, кажется, дубликат Как получить цвет координаты x, y пикселя из изображения?

В верхнем ответе на эту статью есть хорошее объяснение, а также связывает эту скрипку с некоторым кодом, который делает именно то, что вы ищете. Я также включил часть JS ниже, которая зависит от jquery

$(function() {

    $('img').mousemove(function(e) {

        if(!this.canvas) {
            this.canvas = $('<canvas />')[0];
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
        }

        var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

        $('#output').html('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]); 
    });
});