canvas版像素碰撞

canvas像素碰撞思路：

• 创建两个图片
• 将第一张图片拷贝到canvas中，带该图片加载完毕之后
• 拖动第二张图片，用于测试像素碰撞
• 像素碰撞的前提必须是先普通碰撞
• 像素碰撞，两个图片交叉的地方，一定存在一个点，在目标图中的透明度不为0，并且在原图中的透明度不为0。

canvas像素碰撞解释：

• function Rect(x,y,w,h)
  用于后期获取目标图片与原图片交叉所得到的位置，因为canvas没有节点，不能通过节点找到我们想要的东西。

  
  image.png

• context.drawImage(img,0,0);
  context.drawImage(img2,x,y);
  将两张图片绘制到canvas上

• context.drawImage(img,0,0);
  var imgData1 = context.getImageData(nrect.res.x,nrect.res.y,nrect.res.w,nrect.res.h);
  canvas每次保存最后一个绘画的内容，所以在晴空画布之后重新绘制图片1，并获取到目标图与原图交叉的地方在目标图中的所有像素点。

• context.clearRect(0,0,canvas.width,canvas.height);
  context.drawImage(img2,x,y);
  var imgData2 = context.getImageData(nrect.res.x,nrect.res.y,nrect.res.w,nrect.res.h);
  context.drawImage(img,0,0);
  与上面一样，canvas只保存最后一次绘制的内容，所以每次要清空画布的时候还有将图片绘制上去

• for(var i = 0;i < imgData1.data.length;i+=4)
  获取到的像素点每4个为一组，即RGBA……一次循环，所以遍历交叉的地方的像素点时，只要遍历没一组中的最后一个值是否大于0，如果大于0 表示该点不是透明色。表明两图像素碰撞

    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var img = new Image();
        img.src = "../../canvas进阶/55.png";
        var img2 = new Image();
        img2.src = "../../file/Play.png";
        function Rect(x,y,w,h){
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
        }
        img.onload = function(){
            context.beginPath();
            context.drawImage(img,0,0);
            var rect1 = new Rect(0,0,img.width,img.height);
            canvas.onmousedown = function(){
                canvas.onmousemove = function(e){
                    context.clearRect(0,0,canvas.width,canvas.height);
                    var ev = window.event || e;
                    var x = ev.clientX - canvas.offsetLeft;
                    var y = ev.clientY - canvas.offsetTop;
                    context.drawImage(img,0,0);
                    context.drawImage(img2,x,y);
                    var rect2 = new Rect(x,y,img2.width,img2.height);
                    var nrect = isCrash(rect1,rect2);
                    if(nrect.judeg){
                        console.log("普通碰撞");
                        context.drawImage(img,0,0);
                        var imgData1 = context.getImageData(nrect.res.x,nrect.res.y,nrect.res.w,nrect.res.h);
                        context.clearRect(0,0,canvas.width,canvas.height);
                        context.drawImage(img2,x,y);
                        var imgData2 = context.getImageData(nrect.res.x,nrect.res.y,nrect.res.w,nrect.res.h);
                        context.drawImage(img,0,0);
                        for(var i = 0;i < imgData1.data.length;i+=4){
                            if(imgData1.data[i+3] > 0 && imgData2.data[i+3] > 0){
                                console.log("像素碰撞");
                                break;
                            }
                        }
                    }
                }
            }
            document.onmouseup = function(){
                canvas.onmousemove = "";
            }
        }
        function isCrash(rect1,rect2){
            var nMinx = Math.max(rect1.x,rect2.x);
            var nMiny = Math.max(rect1.y,rect2.y);
            var nMaxx = Math.min(rect1.x+rect1.w,rect2.x+rect2.w);
            var nMaxy = Math.min(rect1.y+rect1.h,rect2.y+rect2.h);
            var nrect = new Rect(nMinx,nMiny,(nMaxx - nMinx),(nMaxy - nMiny));
            if(nMaxx > nMinx && nMaxy > nMiny){
                return {
                    judeg: true,
                    res: nrect
                };
            }else{
                return {
                    judeg: false
                }
            }
        }
    </script>