|
[tr][td]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; [*] [*] 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 < data1.length; i += 4) [*] { [*] 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 < data.length; i += 4) [*] { [*] [*] if(data == 0 ) return true; [*] } [*] return false;*/ [*]} |
|
