10.11.2021, 13:20
|
|
Интересующийся
|
|
Регистрация: 01.06.2020
Сообщений: 22
|
|
|
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>
|
|
10.11.2021, 14:54
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
Сообщение от rita
|
|
Как задать в цикле код
|
заменить setInterval на Рекурсивный setTimeout
timerId = setTimeout(tick, x * 10);
|
|
10.11.2021, 15:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
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>
|
|
10.11.2021, 18:24
|
|
Интересующийся
|
|
Регистрация: 01.06.2020
Сообщений: 22
|
|
|
Сократить код
Мне нужно сократить код, примерно так:
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);
Но при таком подходе, интервал выпада кругов на соблюдается. |
|
10.11.2021, 18:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
Сообщение от rita
|
|
интервал выпада кругов на соблюдается.
|
так уберите циклы из функции |
|
10.11.2021, 19:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
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>
|
|
|
|
