我想将圆的大小增加到半径200,然后在JavaScript中将其减小

时间:2019-03-15 06:34:41

标签: javascript html5 html5-canvas

因此,在这里,我尝试制作一个半径为1的圆,并将其增加到200,然后希望它变小到1,然后将其循环。

我知道g_radius ++然后是g_radius --正在创建一种效果,好像它已经停止但无法找出解决方案。

这是我到目前为止尝试过的。我可以增加或减少。

<html>
<canvas width="800" height="600" id="myCanvas"> </canvas>
<script>
    var g_canvas = document.getElementById("myCanvas");
    var g_context = g_canvas.getContext("2d");


    var g_radius = 10 ;

    function f_drawCircle()
    {
        g_context.fillStyle = "blue" ;
        g_context.beginPath();
        g_context.arc(400,300,g_radius,0,2*Math.PI) ;
        g_context.fill();
    }

    function f_clearCanvas()
    {
        g_context.clearRect(0,0,g_canvas.width,g_canvas.height);
        g_context.strokeRect(0,0,g_canvas.width,g_canvas.height);
    }

    function f_varySize()
    {
        g_radius ++ ;
        if(g_radius > 200)
            {
                g_radius -- ;
            }
    }

    function f_loop()
    {
        f_varySize();
        f_clearCanvas();
        f_drawCircle();
    }

    setInterval(f_loop,10);
</script>

1 个答案:

答案 0 :(得分:0)

为尺寸变化的方向创建一个变量,然后将其值添加到enabled。像这样:

g_radius

See it in action