簡體   English   中英

我想將圓的大小增加到半徑200,然后在JavaScript中將其減小

[英]I want to increase the circle size to radius 200 and then decrease it in JavaScript

因此,在這里,我嘗試制作一個半徑為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>

創建一個用於大小變化方向的變量,然后將其值添加到g_radius 像這樣:

var dir = 1;

function f_varySize() {
    if (g_radius > 200) {
        dir = -1;
    }
    if (g_radius < 2) {
        dir = 1;
    }
    g_radius += dir;    
}

看到它在行動

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM