clearinterval 不能起效果

    <body >
<canvas id="mycanvas" width="500px" height="500px"></canvas>
<script>
var context=document.getElementById("mycanvas");
var ctx=context.getContext("2d");
function drawCircleAgain(x){
    var degree=0,t1;
    function drawCircle(){
        ctx.beginPath();
        ctx.arc(143+x, 53,7, Math.PI/2-(Math.PI/180)*degree,Math.PI/2+(Math.PI/180)*degree, false);
        ctx.fill();
        degree=degree+5;
    }
    var t1=setInterval(function(){drawCircle();console.log(degree)},33);
    if(degree>180){clearInterval(t1)}
}
    drawCircleAgain(0)
    setTimeout("ctx.clearRect(0,0,500,500)",3000)
  </script>
</body>

希望能圆能自上画出，再在3秒后消失。。。
现在不能在3秒后消失，发觉是因为圆在不断的画，clearRect只清除一次。
为什么if(degree>180){clearInterval(t1)}这句不起作用呢？？在console里看到degree还在不断的叠加

var context=document.getElementById("mycanvas");
var ctx=context.getContext("2d");
function drawCircleAgain(x){
    var degree=0,t1;
    function drawCircle(){
        ctx.beginPath();
        ctx.arc(143+x, 53,7, Math.PI/2-(Math.PI/180)*degree,Math.PI/2+(Math.PI/180)*degree, false);
        ctx.fill();
        degree=degree+5;
    }
    var t1=setInterval(function(){
        drawCircle();
        console.log(degree);
        if(degree>180){clearInterval(t1)}
    },33);
}
    drawCircleAgain(0)
    setTimeout("ctx.clearRect(0,0,500,500)",3000)

【热门文章】