跟踪鼠标悬停在 html5 canvas

Question

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

Answer 1

这似乎是 How to get a pixel's x,y coordinate color from an image?

的副本

那篇文章的最佳答案提供了很好的解释，links this fiddle 还提供了一些完全符合您要求的代码。我还在下面包含了依赖于 jquery

的 JS 部分

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

跟踪鼠标悬停在 html5 canvas

Tracking mouse hover on html5 canvas

javascript

graphics2d

html5-canvas