canvas变色进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script>
    var can=document.getElementsByTagName("canvas")[0];
    var ctx=can.getContext("2d");
    var w=can.width;
    var h=can.height;
    var k=-90;
    var dd=0;
    var arr=['orange','green','pink','purple','coral','blue','red'];
    ctx.lineWidth="40";
    ctx.lineCap="round";
    ctx.font="50px '楷体'";
    ctx.textBaseline="middle";
    ctx.textAlign="center";
    ctx.strokeStyle=arr[2];
    var timer = setInterval(round, 30);
    function round(){
        ctx.clearRect((w/2-100),(h/2-100),200,200);
        ctx.fillText(""+(k+90),w/2,h/2);
        if((k+90)>360){
            k=-90;
            ctx.strokeStyle=arr[dd%7];
            dd++;
            console.log(dd % 7);
        }
        ctx.beginPath();
        ctx.arc(w/2,h/2,200,-Math.PI/2,Math.PI/180*(k+=10));
        ctx.stroke();
    }
</script>
</body>
</html>