Javascript 使用透明度在画布上分离弧段

我想我只需要展示一下：

功能绘图扇区（ctx、cxy、rInner、路由器、radStart、radWidth、颜色）{
ctx.beginPath（）；
ctx.arc（cxy、cxy、rInner、radStart、radStart+radWidth）；
ctx.lineTo（cxy+路由器*Math.cos（radStart+radWidth），cxy+路由器*Math.sin（radStart+radWidth））；
ctx.arc（cxy，cxy，路由器，radStart+radWidth，radStart，true）；
ctx.lineTo（cxy+rInner*Math.cos（radStart），cxy+rInner*Math.sin（radStart））；
ctx.fillStyle=颜色；
ctx.fill（）；
ctx.stroke（）；
}
函数makecircle（直径）{
var canv=document.createElement（“画布”）；
canv.宽度=直径；canv.高度=直径；
文件.getElementById（“c”）.appendChild（canv）；
var ctx=canv.getContext（“2d”）；
ctx.strokeStyle=“rgba（0,0,0,1）”；
ctx.lineWidth=5；
var centerXY=直径/2；
var中心半径=直径/6；
变量扇区高度=（中心XY-中心半径）/5-2；
var sectorange=Math.PI*2/15；
对于（var r=0；r<15；r++）{
对于（var h=0；h<5；h++）{
绘图扇区（ctx、centerXY、中心半径+扇区高度*h、中心半径+扇区高度*（h+1）、r*扇区间距、扇区间距，“rgba（255,0,0,0.5）”；
}
}
}
makecircle（500）
正文{
背景色：暗绿色；
}
您可以通过设置
globalCompositeOperation='destination-out'
来“擦除”现有像素

然后画出你的辐射线。辐射线将擦除线重叠的任何现有像素，而不是可见的

完成擦除后，请确保将globalCompositeOperation设置回其默认值“source over”