canvas版像素碰撞

2017-12-28

canvas像素碰撞思路：

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

canvas像素碰撞解释：

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