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代码：