canvas生成断续圆弧

arcy('outRing',100,95,200,200,6,'#0f5eeb');
arcy('innerRing',50,48,120,120,56,'#31f4fe');
function arcy(id,R1,R2,w,h,num,color){
    let WIDTH = w,HEIGHT = h;
    let canvas = document.getElementById(id),
        ctx = canvas.getContext("2d");
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    //一个圆弧对应的弧度
    var angle = Math.PI * 2 / num;
    var star = 0;
    var end = angle;

    for (var i = 0; i < num; i++) {
        if(i%2==0){
           ctx.strokeStyle = color; 
       }else{
        ctx.strokeStyle = 'transparent';
       }
        ctx.save();
        ctx.lineWidth = R1 - R2;
        ctx.beginPath();
        ctx.arc(WIDTH / 2, HEIGHT / 2, (R1 + R2) / 2,star,end);
        ctx.stroke();
        ctx.restore();
        star = end;
        end = end + angle;
     } 
}