Canvas в цикле
Всем привет!
Как задать в цикле код, чтобы кружки выпадали так же с интервалом во времени. Код размещаю: <canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"), ctx= canvas.getContext("2d"); function fitWindow () { canvas.width = window.innerWidth canvas.height = window.innerHeight } fitWindow() var x = 40; var y = 1; var x1 = 90; var y1 = 1; var x2 = 140; var y2 = 1; setInterval(function () { x=x+20; y=y+50; ctx.fillStyle = "green"; ctx.beginPath(); ctx.arc(x, y, 9, 0, Math.PI * 2); ctx.fill(); if (x==200) {ctx=null;} } ,100); setInterval(function () { x1=x1+30; y1=y1+50; ctx.fillStyle = "blue"; ctx.beginPath(); ctx.arc(x1, y1,9, 0, Math.PI * 2); ctx.fill(); if (x==500) {ctx=null; } }, 100); setInterval(function () { x2=x2+40; y2=y2+50; ctx.fillStyle = "orange"; ctx.beginPath(); ctx.arc(x2, y2, 9, 0, Math.PI * 2); ctx.fill(); if (x==500) {ctx=null; } }, 100); </script> |
Цитата:
timerId = setTimeout(tick, x * 10); |
rita,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); function fitWindow() { canvas.width = window.innerWidth canvas.height = window.innerHeight } fitWindow() var x = 40; var y = 1; var x1 = 90; var y1 = 1; var x2 = 140; var y2 = 1; var j = 0; setTimeout(function green() { x = x + 20; y = y + 50; ctx.fillStyle = "green"; ctx.beginPath(); ctx.arc(x, y, 9, 0, Math.PI * 2); ctx.fill(); if (x < 500) setTimeout(green, ++j * 100); }, 10); var l = 0; setTimeout(function blue() { x1 = x1 + 30; y1 = y1 + 50; ctx.fillStyle = "blue"; ctx.beginPath(); ctx.arc(x1, y1, 9, 0, Math.PI * 2); ctx.fill(); if (x < 500) setTimeout(blue, ++l * 100); }, 10); var k = 0; setTimeout(function orange() { x2 = x2 + 40; y2 = y2 + 50; ctx.fillStyle = "orange"; ctx.beginPath(); ctx.arc(x2, y2, 9, 0, Math.PI * 2); ctx.fill(); if (x < 500) setTimeout(orange, ++k * 100); }, 10); </script> </body> </html> |
Сократить код
Мне нужно сократить код, примерно так:
var k = 0; setTimeout(function orange() { x2 = x2 + 40; y2 = y2 + 50; for (var j = 0; j < 3; j++){ for (var i = 0; i < 7; i++){ ctx.beginPath(); ctx.arc((23+i*32)+j*74, 23+i*54, 15, 0, Math.PI * 2); ctx.fillStyle='orange'; ctx.closePath(); ctx.fill(); if (x < 500) setTimeout(orange, ++k * 100); }}}, 10); Но при таком подходе, интервал выпада кругов на соблюдается. |
Цитата:
|
rita,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); function fitWindow() { canvas.width = window.innerWidth canvas.height = window.innerHeight } fitWindow() var x = 40; var y = 1; var x1 = 90; var y1 = 1; var x2 = 140; var y2 = 1; var j = 0; setTimeout(function green() { x = x + 20; y = y + 50; ctx.fillStyle = "green"; ctx.beginPath(); ctx.arc(x, y, 9, 0, Math.PI * 2); ctx.fill(); if (x < 500) setTimeout(green, ++j * 100); }, 10); var l = 0; setTimeout(function blue() { x1 = x1 + 30; y1 = y1 + 50; ctx.fillStyle = "blue"; ctx.beginPath(); ctx.arc(x1, y1, 9, 0, Math.PI * 2); ctx.fill(); if (x < 500) setTimeout(blue, ++l * 100); }, 10); var k = 0; var jj = 0; var ii = 0; setTimeout(function orange() { x2 = x2 + 40; y2 = y2 + 50; ctx.beginPath(); ctx.arc((23 + ii * 32) + jj * 74, 23 + ii * 54, 15, 0, Math.PI * 2); ctx.fillStyle = 'orange'; ctx.closePath(); ctx.fill(); if (++ii == 7) { ++jj; ii = 0; } if (jj < 3) setTimeout(orange, ++k * 30); }, 10); </script> </body> </html> |
Часовой пояс GMT +3, время: 11:55. |