跟踪鼠标悬停在 html5 画布上

Question

有谁知道鼠标悬停时的像素颜色跟踪是否可以使用 html5 画布来完成，以在下面的视频中获得相同的结果？

玩家跟踪悬停示例

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]); 
    });
});