Я хочу увеличить размер круга до радиуса 200, а затем уменьшить его в JavaScript - PullRequest
Новая
       20

Я хочу увеличить размер круга до радиуса 200, а затем уменьшить его в JavaScript

1 голос
/ 15 марта 2019

Итак, я пытаюсь сделать круг с радиусом 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 голосов
/ 15 марта 2019

Создайте переменную для направления изменения размера, а затем добавьте ее значение к g_radius.Вот так: 

var dir = 1;

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

увидеть в действии .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...