h5 canvas 像素检测算法

【实例简介】

 h5 canvas 像素检测算法

【实例截图】

【核心代码】

function update() {
            ctx.clearRect(0, 0, 600, 600);
            drawImageBox(giraffe,giraffeImg.x,giraffeImg.y,giraffeImg.r,giraffeImg.r);
            drawImageBox(penguin,penguinImg.x,penguinImg.y,penguinImg.r,penguinImg.r);
            document.querySelector('.hitTestBox').innerHTML = "否";
            document.querySelector('.hitTestPixel').innerHTML = "否";
            var rect = getInRect(giraffeImg.x,giraffeImg.y,giraffeImg.x giraffeImg.r,giraffeImg.y giraffeImg.r,penguinImg.x,penguinImg.y,penguinImg.x penguinImg.r,penguinImg.y penguinImg.r)

            //如果没有相交则退出
            if(rect[0]>=rect[2]||rect[1]>=rect[3]) {

            } else{
                document.querySelector('.hitTestBox').innerHTML = "是";
                giraffeImg.data = null;
                penguinImg.data = null;
                //获取精灵在相交矩形像素数据
                drawImageBC(giraffe,giraffeImg.x,giraffeImg.y,giraffeImg.r,giraffeImg.r);
                giraffeImg.data = backBuf.getImageData(rect[0],rect[1],rect[2],rect[3]).data;
                drawImageBC(penguin,penguinImg.x,penguinImg.y,penguinImg.r,penguinImg.r);
                penguinImg.data = backBuf.getImageData(rect[0],rect[1],rect[2],rect[3]).data;
                for(var i=3;i<giraffeImg.data.length;i =4)
                {
                    if(giraffeImg.data[i]>0&&penguinImg.data[i]>0){
                        document.querySelector('.hitTestPixel').innerHTML = "是";
                    }
                }

            }
            requestAnimationFrame(update);
        }