剪紙漏洞效果主要是利用了canvas的非零環(huán)繞規(guī)則
簡單來說就是canvas fill填充的是同一路徑順時針和逆時針中間的部分蔼夜，簡稱
非零環(huán)繞
效果如圖
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()
