Показать сообщение отдельно
  #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>
Ответить с цитированием