zoukankan      html  css  js  c++  java
  • canvas路径剪切和判断是否在路径内

    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

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

        

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

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

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

  • 相关阅读:
    两台虚拟机(不同电脑)通信
    虚拟机使用网络助手
    strcpy_s
    线程创建几种方法
    JavaWeb——EL详解
    JavaWeb_EL语法
    JavaWeb_JavaBean
    JavaWeb_HttpSession之验证码
    JavaWeb_HttpSession之表单的重复提交
    JavaWeb——相对路径和绝对路径
  • 原文地址:https://www.cnblogs.com/mirrortom/p/6408531.html
Copyright © 2011-2022 走看看