canvas isPointInPath与 canvas交互效果的实现

demo
canvas可以做出很多绚丽的特效,但是canvas内的内容怎么交互呢?
canvas有个重要的方法,isPointInPath()


#isPointInPath()定义和用法
isPointInPath() 方法返回 true,如果指定的点位于当前路径中;否则返回 false。


#JavaScript 语法:

1
context.isPointInPath(x,y);

x:测试的 x 坐标
y:测试的 y 坐标
使用的时候只需要判断点是否路径里就能知道是否点击或触摸了,并且在此之上可以再进行重绘,这样就形成交互了


#demo
在这个demo里,我设置了个for循环生成10个小球的位置,大小的数据,循环的时候都把生成的小球的数据添加到balls这个数组里,然后调用draw方法画出这10个小球,然后给canvas添加了点击事件监听,每次点击循环取出balls中小球数据,并且判断点击的位置是否在相对应的小球里,是的话就让被点击的小球颜色随机变化


需要注意的是,获取canvas点击位置的方法是

1
2
var x=event.clientX-canvas.getBoundingClientRect().left;
var y=event.clientY-canvas.getBoundingClientRect().top;

这个需要记住
虽然用offset也可以,但是精度没有getBoundingClientRect()