Как создать цикл for, который перезапускает анимацию круга до его завершения, делая его похожим на пульсирующий круг - PullRequest
Новая
       13

Как создать цикл for, который перезапускает анимацию круга до его завершения, делая его похожим на пульсирующий круг

0 голосов
/ 23 марта 2019

У меня есть код растущего круга, но я пытаюсь сделать так, чтобы несколько кругов росли в canvas / javascript. Я хочу, чтобы он выглядел как его пульсирующие, постоянно накачивающие круги, как звуковые волны. Я довольно новичок в кодировании, поэтому я не уверен в синтаксисе, но что-то вроде if(radius of circle> width of canvas/30px){create new circle} вот код, который у меня есть до сих пор 

window.onload=function(){
    function animate() {
        var c=document.getElementById("myCanvas");
        var ctx= c.getContext("2d");
        ctx.clearRect(0, 0, c.width, c.height);

        if(i > 200) {
            i = 1;
        }

        if( i > 40) {
            ctx.beginPath();
            ctx.arc(c.width/2, c.width/2, i-40, 0, 2 * Math.PI, true);
            ctx.lineWidth = 7;
            ctx.stroke();
        }
        i++;
        setTimeout(animate, 10);
    }
    var i = 0;
    animate();
  }
}

Я пытался вставить if(i>30px)animate(); и другие варианты, но не повезло. заранее спасибо!

1 Ответ

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

Попробуйте приведенный ниже код для анимации. 

<html>
<body>
<script>
window.onload=function(){
    function animate() {
        var c=document.getElementById("myCanvas");
        var ctx= c.getContext("2d");
        ctx.clearRect(0, 0, c.width, c.height);

        if(i > 300) {	// adjust the place need to stop the animation at canvas, how many pixels that the stop point close to the origin
            i = 1;	
        }

        if( i > 1) {
	    var j = 0;
	    while(j<50){	// number of circles in the wave (50/5)
		    ctx.beginPath();
		    ctx.arc(c.width/2, c.height+300, i+(j*5), 0, 2 * Math.PI, true);	// i=(j*5) adjust the distance between circles
		    ctx.lineWidth = 7;
		    ctx.stroke();
	            j += 5;
	    }
        }
        i++;
        setTimeout(animate, 10);
    }
    var i = 0;
    animate();
}
</script>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>
...