1.
ctx.isPointInPath(80,80):判断点是否在上面路径的区域内。
ctx.isPointInStroke(80,50):判断点是否在上面路径的边缘线上。
浏览器支持情况:
(1)Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 isPointInPath() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
(2)isPointInStroke支持情况:
可以通过getImageData来替换isPointInStroke的不足,一个用stroke描边的方式绘制的图形,只有边线是有色的,通过getImageData判断某个点,是否透明,来判断该点是否在边缘线上。
data[3] 的值是128,所以该点在边缘线上。
isPointInPath方法采用了非零环绕原则:判断p点是否在一个区域内,从点p向外做一条射线(可以任意方向),多边形的边从左到右经过射线时环绕数-1,多边形的边从右向左经过时环绕数+1,最后环绕数不为0,即表示在多边形内部。
第一步:按顺时针或逆时针给每个边画一个方向箭头;
第二步:点p向任意方向,做一条射线;
第三步:左、上方向的+1,右、下方向-1;
如果和不是0,就在区域中。
2. 解决canvas高分屏模糊
在分辨率比较高的屏幕,比如:iPhone6、iPhone6s、mac等屏幕,canvas绘制的是位图,会在分辨率高的屏幕产生模糊。
解决办法:
<canvas width="200" height="200" id="canvas1"></canvas>
#canvas1 {
width: 100px;
height: 100px;
border: 1px solid black;
}
这样对于canvas来说,就是2:1比例的内容,分辨率会提高两倍。