canvas 像素级碰撞


demo地址http://06wjin.sinaapp.com/html5/hitTest/ 用鼠标拖动 1首先先判断两个图片的矩形区域有无碰撞 判断两个矩形的中心距离即可 2如果矩形区域有碰撞则...
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 < data1.length; i += 4)
  •         {
  •       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 < data.length; i += 4)
  •         {

  •                 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 < sprite.x + sprite.width ? this.x + this.width : sprite.x + sprite.width ;
  •         var miny = this.y > sprite.y ? this.y : sprite.y;
  •         var maxy = this.y + this.width < sprite.y + sprite.width ? this.y + this.width : sprite.y + sprite.width;
标签: