在HTML5 + JavaScript中檢測畫布上的顏色沖突

Question

我正在JavaScript中尋找一種方法來檢測是否有這樣的object ：

var box = {
    x: 5,
    y: 19,
    width: 10,
    height: 5,
    draw: function(ctx){...draw Box on context "ctx"},
    touchingColor: function(ctx,color){...}
}

所以基本上我要尋找的是一個函數touchingColor，如果我的box在指定的上下文box觸摸了指定的顏色，則返回true 。

有沒有辦法做到這一點，還是我需要跟蹤在畫布上繪制的東西？

Answer 1

好吧，我找到了解決此問題的方法:)希望它可以幫助某人...

var box = {
    x: 5,
    y: 19,
    width: 10,
    height: 5,
    draw: function(ctx){...draw Box on context "ctx"},
    touchingColor: function(ctx,r,g,b){
        var data = ctx.getImageData(this.x,this.y,this.width,this.height);
        for(var i=0;i<data.length;i+=4){
            if(
                data[i+0]==r&&
                data[i+1]==g&&
                data[i+2]==b
            ){
                return true;
            }
        }
        return false;
    }
};