canvas学习（十四）：canvas交互之isPositonInPath

先说说用到的两个方法：

1、isPositonInPath(x,y):判断(x,y)是否在canvas绘制的图形所在路径中。不太理解的可以参考W3School中的“HTML5 canvas isPointInPath() 方法”

2、getBoundingClientRect()：这个方法用来用来获取元素位置，即获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

 

然后说说要实现的效果：

在canvas中绘制20个小球，当鼠标点击小球时，小球变红。

具体思路：先在canvas中绘制20个小球，然后在原来小球的位置处再绘制一遍小球但是不填充颜色，再根据鼠标点击的坐标判断是否在某个小球的绘制范围内，若在其中就将小球填充为红色，否则不填充。

具体html页面与以前的相同，这里就不多说了，直接上JS代码：

var ball = [];//用来存放小球
var canvas = null;//用来存放canvas对象，方便后面方法调用
var context2 = null;//用来存放context对象，方便后面方法调用

window.onload=function(){
	var myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		myCanvas.width = document.documentElement.clientWidth-20;
		myCanvas.height = document.documentElement.clientHeight-20;
		
		var context =myCanvas.getContext("2d");
		
		canvas = myCanvas;
		context2 = context;

		//生成20个小球
		var aBall=null;
		for(var i=0;i<20;i++){
			aBall={
				x:Math.random()*myCanvas.width,
				y:Math.random()*myCanvas.height,
				r:Math.random()*50+10
			}
			ball[i]=aBall;//添加到数组中
		}

		//在canvas中绘制小球
		drawBall(context);

		//添加事件：mouseup
		myCanvas.addEventListener("mouseup",detect);		
	}else{
		return false;
	}
}

//该方法用来绘制小球
function drawBall(cxt){
	for(var i=0;i<ball.length;i++){
		cxt.beginPath();
		cxt.arc(ball[i].x,ball[i].y,ball[i].r,0,Math.PI*2);

		cxt.fillStyle="#058";
		cxt.fill();
		cxt.closePath();
	}
}

//当鼠标点击小球时触发该事件
function detect(event){
	var x = event.clientX - canvas.getBoundingClientRect().left;
	var y = event.clientY - canvas.getBoundingClientRect().top;
	
	//每个小球都进行判断，判断(x,y)是否在其中
	for(var i=0;i<ball.length;i++){
		context2.beginPath();
		context2.arc(ball[i].x,ball[i].y,ball[i].r,0,Math.PI*2);
		
		//判断(x,y)是否在canvas绘制的路径中（绘制的每个图形算一个路径）
		if(context2.isPointInPath(x,y)){
			context2.fillStyle="red";
			context2.fill();
		}
	}

}

再来个更舒服点的效果：当鼠标经过某个小球时，小球变红否则小球还是原来的颜色。

实现思路与上个例子相同，代码除触发时间不一样之外其他都一样，因此雷同代码就不在赘述了。这里只粘贴鼠标经过事件及处理方法：

//添加事件：mouseover
myCanvas.addEventListener("mousemove",detect2);

//当鼠标经过小球时触发该事件
function detect2(event){
	var x = event.clientX - canvas.getBoundingClientRect().left;
	var y = event.clientY - canvas.getBoundingClientRect().top;
	//每个小球都进行判断，判断(x,y)是否在其中
	for(var i=0;i<ball.length;i++){
		context2.beginPath();
		context2.arc(ball[i].x,ball[i].y,ball[i].r,0,Math.PI*2);
		
		if(context2.isPointInPath(x,y)){//在其中
			context2.fillStyle="red";
		}else{
			context2.fillStyle="#058";
		}
		context2.fill();
	}
}

最后感谢老师的分享！