Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2021, 13:20
Интересующийся
Отправить личное сообщение для rita Посмотреть профиль Найти все сообщения от rita
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2021, 14:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от rita
Как задать в цикле код
заменить setInterval на Рекурсивный setTimeout
timerId = setTimeout(tick, x * 10);
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2021, 15:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2021, 18:24
Интересующийся
Отправить личное сообщение для rita Посмотреть профиль Найти все сообщения от rita
 
Регистрация: 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);


Но при таком подходе, интервал выпада кругов на соблюдается.
Ответить с цитированием
  #5 (permalink)  
Старый 10.11.2021, 18:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от rita
интервал выпада кругов на соблюдается.
так уберите циклы из функции
Ответить с цитированием
  #6 (permalink)  
Старый 10.11.2021, 19:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как изменить расположение iframe и canvas и не перерисовать? Was-Ja Общие вопросы Javascript 2 08.11.2020 23:51
Canvas Вывод изображений в цикле 0leg9 Элементы интерфейса 22 15.07.2015 05:55
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16