我这是除了什么问题

来源：8-1 Canvas动画

光aaaaand影

2019-08-19 08:25:10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>canvas</title>
        <style>
            canvas{
                background: red;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="400">
            您的浏览器不支持canvas!
        </canvas>
        <script type="text/javascript">
            var myCanvas=document.getElementById("myCanvas");
            // getContext() 方法返回一个用于在画布上绘图的环境
            var ctx=myCanvas.getContext("2d");
            var r=50,dir=1;
            
            setInterval(function(){
                r+=10*dir;
                ctx.clearRect(0,0,ctx.width,ctx.height);
                ctx.fillStyle="yellow";
                ctx.arc(200,200,r,0,2*Math.PI);
                ctx.fill();
                if(r>=200){
                    dir=-1;
                }else if(r<0){
                    dir=1;
                }
            },100)
            
        </script>
    </body>
</html>

老师，我想让这个圆一直放大，碰到画布边时又逐渐缩回去，为什么它在碰到边时只是停住了呢

写回答

1回答