canvas实现剪纸漏洞效果

剪纸漏洞效果主要是利用了canvas的非零环绕规则
简单来说就是canvas fill填充的是同一路径顺时针和逆时针中间的部分，简称
非零环绕
效果如图

var canvas_2=document.getElementById("canvas_2");
var can2_context=canvas_2.getContext("2d");
var width_2=canvas_2.width
var height_2=canvas_2.height
var testx=300
var testy=300
function drawCutouts(){

    can2_context.beginPath();
    addOurterRectanglePath()
    addrect()
    addTrianglePath()
    addarc()
    can2_context.fill()
}

function addOurterRectanglePath(){
     can2_context.rect(110,25,370,335)
     can2_context.closePath()
}


function rect(x,y,w,h,direction){

    if(direction){
        can2_context.moveTo(x,y);
        can2_context.lineTo(x,y+h)
        can2_context.lineTo(x+w,y+h)
        can2_context.lineTo(x+w,y)
    }else{
        can2_context.moveTo(x,y)
        can2_context.lineTo(x+w,y)
        can2_context.lineTo(x+w,y+h)
        can2_context.lineTo(x,y+h)

    }
    can2_context.closePath()
}
function addrect(){
    rect(310,55,70,35,true)  //true为逆时针
}
function addTrianglePath(){
   
   can2_context.moveTo(400,200)
   can2_context.lineTo(250,115)
   can2_context.lineTo(200,200)
   can2_context.closePath()

}



function addarc(){
    if(testy>335){testy=25}
    testy=testy+1
    
    can2_context.arc(testx,testy,40,0,Math.PI*2,true)
   
}

function hi(){
   can2_context.clearRect(0,0,width_2,height_2)
   drawCutouts()

   requestAnimationFrame(hi)

}
hi()