在html5画布上跟踪鼠标悬停

有人知道是否可以使用html5 canvas进行鼠标悬停时的像素颜色跟踪,以在下面的视频中获得相同的结果?

player tracking hover example

ygp47 回答:在html5画布上跟踪鼠标悬停

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

的副本

该文章的最高答案提供了很好的解释,以及links this fiddle的某些代码完全可以满足您的需求。我还包括了下面的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,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]); 
    });
});
本文链接:https://www.f2er.com/2538133.html

大家都在问