Javascript-форум - Задержка при рисовании

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Задержка при рисовании (https://javascript.ru/forum/misc/35543-zaderzhka-pri-risovanii.html)

Задержка при рисовании

Всем привет, собственно появилась проблема создать задержку при рисовании в цыкле. На данный момент пытаюсь сделать эффект волн по изображению через canvas, но самый простой без пиксельной графики. Проблема заключается в том чтобы круги при клике появлялись через какой то интервал времени, а не сразу все. Поскольку цыкл связан с событием то даже если использовать setTimeout() то теряются координаты клика мыши и надо заново кликать чтобы появился бОльший круг. Вот собственно код функции которая срабатывает при клике:

function circles(e) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.globalAlpha = 0.1;
for (var i=0; i<10; i++) {
ctx.beginPath();
ctx.arc(e.pageX, e.pageY, 10+10*i, 0, Math.PI*2, false);
ctx.stroke();
ctx.globalCompositeOperation = 'copy';
}
}

Заранее спасибо. Где уже только не искал. PS: Кстати алерт блочит рисовку следующего круга как мне нужно, не знаю только как это сделать с определённым интервалом.

Допишите тут свой код, чтобы можно было запускать и видеть результат прям тут:

<canvas id="canvas" style="width: 100%;height:200px"></canvas>
<script>
function circles(e) {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#000';
    ctx.globalAlpha = 0.1;
    for (var i=0; i<10; i++) {
        ctx.beginPath();
        ctx.arc(e.pageX, e.pageY, 10+10*i, 0, Math.PI*2, false);
        ctx.stroke();
        ctx.globalCompositeOperation = 'copy';
    }
}
canvas.onclick = circles;
</script>

<head>
  </head>
  
  <body>
    <script>
      <head>
        <style type = "text/css">
          canvas {
            background: url(ultra-pda.ru/wp-content/gallery/640px/1.jpg) no - repeat;
         } 
          </style>

<script>
var canvas, ctx;

function init() {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  canvas.addEventListener('click', circles);

}

function circles(e) {
  ctx.fillStyle = '#FFF';
  ctx.globalAlpha = 0.1;
  for (var i = 0; i < 15; i++) {
    ctx.beginPath();
    ctx.arc(e.pageX, e.pageY, 10 + 10 * i, 0, Math.PI * 2, false);
    ctx.stroke();
    alert(i);
    ctx.globalCompositeOperation = 'copy';
  }


}
</script>
</head>
    
<body onload="init()">
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</script>
</body>

В песочницу залил, а то тут при запуске на грузится картинка чёто.

http://learn.javascript.ru/play/ObbxO
ЗЫ: хочу чтобы работало так же только без алертов.

дзен, премного благодарен.

setTimeout|setInterval|requestAnimationFrame в помощь

Всем спасибо за помощь. Разобрался.