Javascript-форум - Как нарисовать одновременно два квадрата

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как нарисовать одновременно два квадрата (https://javascript.ru/forum/events/50726-kak-narisovat-odnovremenno-dva-kvadrata.html)

Как нарисовать одновременно два квадрата

Подскажите пожалуйста

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="300" style="outline:1px solid #d3d3d3;">
  <script>
  window.onload = function()
  {
		  var Mcanvas = document.getElementById("canvas").getContext("2d");
					var m = 0;
					Mcanvas.clearRect(0,0,300,300)
					Mcanvas.lineStyle = "#109bfc";
					Mcanvas.lineWidth = 1;
					Mcanvas.beginPath();
					Mcanvas.moveTo(0,0);
				
					var SI = setInterval(function()
						{ 
							m++
							switch(m){
							case 1: Mcanvas.lineTo(0,100); break;
							case 2: Mcanvas.lineTo(100,100);  break;
							case 3: Mcanvas.lineTo(100,0); break;
							case 4: Mcanvas.lineTo(0,0); break;
							}
							Mcanvas.stroke();
						
							
							if(m == 5)
							{
								clearInterval(SI);
								Mcanvas.fillStyle = "rgb(78, 193, 243)";
								Mcanvas.fill();
								
								Mcanvas.beginPath();
								Mcanvas.moveTo(100,100);
						
								var SI2 = setInterval(function()
								{ 
									m++
									switch(m){
									case 6: Mcanvas.lineTo(100,200); break;
									case 7: Mcanvas.lineTo(200,200); break;
									case 8: Mcanvas.lineTo(200,100); break;
									case 9: Mcanvas.lineTo(100,100); break;
									}
									Mcanvas.stroke();
								
									
									if(m == 10)
									{
										clearInterval(SI2);
										Mcanvas.fillStyle = "rgb(78, 193, 243)";
										Mcanvas.fill();
									}
								},1000); 		
								
								
							}
						},1000); 		
		}
						
  </script>
</body>
</html>

Сейчас квадраты рисуются друг за другом, а надо сразу оба

Никто не знаеt?

Проблема собственно в чем? Рисуйте в одном интервале два квадрата.

Ознакомился поближе. Бредокод. Сами написали или натырили?

Mcanvas.moveTo(0,0);

/*
это значит массив с массивами по 2 элемента в каждом:
первый (индекс 0) х, второй (индекс 1) у.
при этом каждый такой компонент имеет свой индекс, см ниже
*/
var corners=[  
	[0,100],
	[100,100],
	[100,0],
	[0,0]
 ];

for(var i=0;i<corners.length;i++)
	Mcanvas.lineTo(corners[i][0],corners[i][1]);

Mcanvas.stroke();
Mcanvas.fillStyle = "rgb(78, 193, 243)";
Mcanvas.fill();

Нарисуется мгновенно, да, чтобы постепенно через таймер выбираете компоненты массива точно так же, но без цикла. Чтобы 2 квадрата - просто делается второй массив corners2 со своими координатами, можно относительными corners, или считайте в таймере. В одном.

Но вообще-то так не делают в лучших домах лондОна и пАрижа. Пишут функцию которая по заданным в человеческом понимании размерам и точкой отсчета (origin). Функция сама дожна вычислить координаты и все такое.

Что по твоему делает условие в приведенном тобой коде? «if(m == 5)»
p.s. Не слушай местных шутов код прост понятен и запускаем
но явно отсутствую элементарные знания о создании анимации
setInterval в анимации да и не только может приводить к весьма печальным последствиям

К каким именно печальным?