【理论】Canvas之路径和子路径

在某个时刻canvas中只能有一条路径存在，但是这个路径中可以包含多个子路径

• 填充路径时所使用的非零环绕规则：

  • 

  • 在路径中的任意区域，从该区域向外画一条足够长的线段并将该线段完全的落在路径范围之外。然后从内向进行计数，如果该线段和路径上的直线或是曲线相交的时候。如果是与当前路径的顺时针相交，就加1，如果是和逆时针相交就减1。如果最后线段的计数是0就说明该区域不在路径中，不是则在。

剪纸 实现样式

代码

<script>
    let canvas = document.getElementById('myCanvas')
    let ctx = canvas.getContext('2d')

    function drawTwoArcs(){
      ctx.beginPath()
      ctx.arc(300,190,150,0,Math.PI* 2,false)
      ctx.arc(300,190,100,0,Math.PI*2,true)
      ctx.fill()
      // 这里应该是给绘制路径的线段做阴影
      ctx.shadowColor = undefined
      ctx.shadowOffsetX = 0
      ctx.shadowOffsetY = 0
      ctx.stroke()
    }

    function draw(){
      ctx.clearRect(0,0,canvas.width,canvas.height)
      ctx.save()
      // 这里应该是给整理填充的路径做阴影
      ctx.shadowColor = 'rgba(0,0,0,0.8)'
      ctx.shadowOffsetX = 12
      ctx.shadowOffsetY = 12
      ctx.shadowBlur = 15
      drawTwoArcs()
      ctx.restore()
    }
    ctx.fillStyle = 'rgba(100,140,230,0.5)'
    ctx.strokeStyle = ctx.fillStyle
    draw()
  </script> 

问题 beginPath是将当前路径中的所有子路径都是清除掉