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>
