Задержка при рисовании
Всем привет, собственно появилась проблема создать задержку при рисовании в цыкле. На данный момент пытаюсь сделать эффект волн по изображению через 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 в помощь
|
Всем спасибо за помощь. Разобрался.
|
Часовой пояс GMT +3, время: 19:03. |