canvas路径剪切和判断是否在路径内

Posted 2020-09-01 MirrorSpace

1.剪切路径 clip()

　　var ctx=mycanvas.getContext(\'2d\');

　　ctx.beginPath();

　　// 建一个矩形路径

　　ctx.moveTo(20,10)

　　ctx.lineTo(100,10)

　　ctx.lineTo(100,100)

　　ctx.lineTo(20,100)

　　ctx.closePath();

 

　　// 剪切

　　ctx.clip();

　　ctx.fillRect(0,0,50,50);

这句话的作用是,在这个画布上绘图时，只在clip()的这块路径区域内才stroke()出来.意思如下图:(绘画时,只有黑框区域中才会显示出来,之外的区域不会显示绘图内容)

    

2.判断是否在路径内 isPointInPath()

　　ctx.rect(20,20,150,100);

      var isin=ctx.isPointInPath(20,50);// true

　　 如图所示,这是最简单的用户,判断这一点是不是在这个路径内,在边上也算. 

　　　　

　　有时候重新定义了坐标的原点,还旋转了坐标系,这种情况下,画出一个路径范围后,如果要判断一个点(这个点的坐标是坐标系变化之前的)是否在这路径之内.那么会有错误,

因为这个路径范围所在的坐标系的原点和旋转角度和被判断点的坐标系不一样,那么,需要将这个点的坐标经过计算后得出一个新坐标就可以判断了

总之,要两个坐标系原点和旋转角度一至的情况下才判断