在HTML5 + JavaScript中检测画布上的颜色碰撞

时间:2017-04-01 09:01:06

标签: javascript html5 canvas html5-canvas

我在JavaScript中寻找一种方法,我可以检测object是否像这样:

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

基本上我正在寻找的是一个touchColor函数,如果我的true在指定的上下文中触摸指定的颜色,则会返回box

有没有办法实现这一目标,还是需要跟踪我在画布上绘制的内容?

1 个答案:

答案 0 :(得分:0)

好吧,我找到了解决这个问题的方法:)希望它有助于某人...

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