demo地址http://06wjin.sinaapp.com/html5/hittest/     用鼠标拖动
1首先先判断两个图片的矩形区域有无碰撞
判断两个矩形的中心距离即可
2如果矩形区域有碰撞则检测上图红色矩形区域的像素，这里有两种方法
a 直接判断，循环检测两位图在红色矩形内是否有一点像素的alpha点都不为0，如果有则说明碰撞
context.drawimage(img1, x1, y1);//画第一张位图
        var data1 = context.getimagedata(minx, miny, maxx - minx, maxy - miny).data;//获取第一张位图红色矩形内像素
        context.clearrect(x1, y1,img1.width,img1.height);//清除第一张位图
        context.drawimage(img2, x2, y2);//画第二张位图
        var data2 = context.getimagedata(minx, miny, maxx - minx, maxy - miny).data;//获取第二章位图红色矩形内像素
for(var i = 3; i         {
      if(data1 > 0 && data2 > 0) return true;//循环判断alpha值，这里可以设置透明阙值，比如把0改为0.2，意味着透明度为0.2时就认为不碰撞了
        }
        return false;
b将绘图模式改为xor(xor是指相交部分透明，具体见站长上篇教程)，也可以判断context.drawimage(img1, x1,y1);//画第一张位图        context.globalcompositeoperation = 'xor';//改绘图模式为xor        context.drawimage(img2, x2,y2);//画第二张位图        var data = context.getimagedata(minx, miny, maxx - minx, maxy - miny).data;//获取位图红色矩形内像素        context.globalcompositeoperation = 'source-over';//把绘图模式改回去
        for(var i = 3; i         {
                if(data == 0 ) return true;//若有透明像素，则碰撞        }        return false;
下面是一个2d精灵类，碰撞直接用sprite1.hittest(sprite2)就好
function sprite(x, y, img, width, height){    this.x = x;    this.y = y;    this.img = document.getelementbyid(img);    this.width = width;    this.height = height;    this.halfwidth = this.width/2;    this.halfheight = this.height/2;    this.angle = 0;角度    this.scalex = 1;//水平缩放    this.scaley = 1;//竖直缩放    this.alpha = 1;//透明度    this.isdrug = false;//是否拖到}
sprite.prototype.draw = function(){   context.save();   context.translate(this.x + this.halfwidth, this.y + this.halfheight);   context.globalalpha = this.alpha;//修改透明度   context.rotate(this.angle);//旋转角度   context.scale(this.scalex, this.scaley);//缩放   context.drawimage(this.img, -this.halfwidth, -this.halfheight);   context.restore();}
sprite.prototype.hittest = function(sprite){        var minx = this.x > sprite.x ? this.x :sprite.x;        var maxx = this.x + this.width         var miny = this.y > sprite.y ? this.y : sprite.y;        var maxy = this.y + this.width
        if (minx >= maxx || miny >= maxy) {return false;}
        var canvas = document.createelement('canvas');        canvas.setattribute('width', 550);        canvas.setattribute('height', 400);        var context = canvas.getcontext('2d');
/*第一种方法*/        context.drawimage(this.img, this.x, this.y);        var data1 = context.getimagedata(minx, miny, maxx - minx, maxy - miny).data;        context.clearrect(0, 0, 550, 400);        context.drawimage(sprite.img, sprite.x, sprite.y);        var data2 = context.getimagedata(minx, miny, maxx - minx, maxy - miny).data;
        for(var i = 3; i         {                if(data1 > 0 && data2 > 0) return true;        }        return false;
        /*第二种方法        context.drawimage(this.img, this.x, this.y);        context.globalcompositeoperation = 'xor';        context.drawimage(sprite.img, sprite.x, sprite.y);        var data = context.getimagedata(minx, miny, maxx - minx, maxy - miny).data;        context.globalcompositeoperation = 'source-over';
        for(var i = 3; i         {
                if(data == 0 ) return true;        }        return false;*/}