холст загружается правильно только при перезагрузке страницы

Question

я создал волновой эффект на холсте,
для этого я использовал четыре круга, которые нарисованы одна за другой через некоторый интервал, и их радиус увеличивается в каждом цикле,
как первая волна, затем вторая волна, затемТретья и последняя четвертая волна*

скриншоты прилагаются

вот мой код

 <canvas id="myCanvas" ></canvas>


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 var ww =   window.innerWidth; 
 var wh = window.innerHeight;
canvas.width = ww * 0.98;
canvas.height = wh * 0.98;
var CW = canvas.width;
var CH = canvas.height;


var radiusFirstWave = 20
var radiusSecondWave = 20
var radiusThirdWave = 20
var radiusFourthWave = 20

function FirstWave() {
//opacity = 1;

   ctx.clearRect(0, 0, CW, CH);
    ctx.beginPath();
    ctx.arc(0,0, radiusFirstWave, 0, 2 * Math.PI);


     ctx.lineWidth = 2;

       ctx.strokeStyle = "rgb(00,00,ff)" ;

    ctx.stroke();

    radiusFirstWave += (CW*speed)/3000;

    if (radiusFirstWave >(ww*FinalRadius)/100)
    {radiusFirstWave =  InitialRadius*ww/100;}


    requestAnimationFrame(function() {
        FirstWave();
    });
} 



FirstWave();    

 setTimeout(function SecondWave() {
// some code

    rAF = requestAnimationFrame(function() {
        SecondWave();
    });
    },  500);

 setTimeout(function ThirdWave() {
 //some code
    rAF = requestAnimationFrame(function() {
        ThirdWave();
    });
    }, 1000);

 setTimeout(function FourthWave() {
 //some code 

    rAF = requestAnimationFrame(function() {
        FourthWave();
    });
    }, 1500);

вот вывод, когда я открываю его в браузере в первый раз, вместо того, чтобы появлятьсяпосле 500 millisecond они загружаются один раз

Но когда я обновляю страницу, она показывает вот так, именно это я и кодировал для

отчетливо виден разрыв между кружками

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

Answer 1

Не запускайте несколько циклов requestAnimationFrame одновременно, как этот.

Ваши вызовы будут суммироваться до момента следующего обновления экрана, так что это может сработать и не будет слишком сильно снижать производительность ... но в вашей реализации вы не можете быть уверены в порядке, в котором они были сложены, потому что вы вызываете их из случайного запуска setTimeout.

Я имею в виду случайно, потому что в отношении последовательности обновления экрана и requestAnimationFramecallbacks звонки, это случайно .Следующий вызов уже запущенных циклов будет сложен только перед следующим обновлением экрана.У вашего тайм-аута есть большие шансы упасть до того, как => он будет накапливаться первым.

Так что вы вполне можете в конечном итоге вызвать [ FourthWave , ThirdWave , SecondWave , FirstWave ] в этом порядке, и все три первых вызова были бы очищены с помощью clearRect in FirstWave .

Так что вместозапустив эти 4 цикла анимации, проще всего использовать флаги и один цикл анимации:

var flags = [1,0,0,0];
function anim() {
  if(flags[0]) FirstWave();
  if(flags[1]) SecondWave();
  if(flags[2]) ThirdWave();
  if(flags[3]) FourthWave();
  requestAnimationFrame(anim);
}
setTimeout(function() {
  flags[1] = 1;
}, 500);
...