Animacja litery M, złożonej z czterech osobnych obiektów

0

Witam muszę wykonać animacje litery M która ma wyglądać w taki sposób, że literka M złożona jest z 4 osobnych obiektów i każdy z nich podąża w inna stronę. Do tego momentu wszystko było w porządku ale teraz muszę zrobić tak aby w pewnym momencie literka zaczęła składać się z powrotem. Muszę również zrobić tak aby literka była cała przez jakieś 2 sekundy. Ktoś może mi w tym pomóc ?

Kod literki M

><html>
<head>
<title>ruch</title>
<link href="style.css" rel="stylesheet">
</head>
	<body>
    <canvas id="canvas" width="800" height="600"></canvas>
		<script>

		var c = document.getElementById("canvas");
		var c = c.getContext("2d");
		var i =0;
		

	
function draw() {
c.clearRect(0,0,canvas.width, canvas.height);//czyszczenie płótna

						// M znak /
c.beginPath();  
c.moveTo(110+i,100-i);  
c.lineTo(110+i,160-i);
c.stroke(); 

						// M znak \
c.beginPath();
c.moveTo(110-i,100+i) 
c.lineTo(140-i,140+i);
c.stroke();
						// M znak /
c.beginPath();
c.moveTo(140-i,140-i)
c.lineTo(170-i,100-i);
c.stroke();
						// M znak \
c.beginPath();
c.moveTo(170+i,100+i)
c.lineTo(170+i,160+i);
c.stroke(); 

	i++;
	}

	setInterval("draw()",30);

		</script>
	</body>
</html>

dodanie znaczników <code class="html"> i <code class="javascript"> - @furious programming

0

Jak na moje oko, to trzeba zrobic identycznie tylko, że odwrotnie;p Czyli jak miałeś cześć rysunku rysowaną tak:

c.beginPath();
c.moveTo(170+i,100+i)
c.lineTo(170+i,160+i);
c.stroke();

to trzeba zrobić chyba tak (podmieniasz parametry):

c.beginPath();
c.moveTo(170+i,160+i)
c.lineTo(170+i,160+i);
c.stroke();

Dodatkowo trzeba ustawić, żeby zamalowało kolorem tła i voila;p

0

Niestety nadal nie wiem jak sobie z tym poradzić. Dostałem jeszcze podpowiedź żeby dla każdego obiektu zrobić jakiegoś if w którym po osiągnięciu pewnej wartości obiekt zacznie wracać. I tego także nie potrafię napisać

0

https://jsfiddle.net/snysccuL/
na chłopski rozum skoro oddalanie to zwiększanie zmiennej i to zfijanie jest rezultatem zmniejszania i.
Zfijanie się kończy przy i == 0, kiedy litera M jest złoszona.

0

A idzie to jakoś zautomatyzować żeby się samo wracało po tym czasie a nie po naciśnięciu na przycisk ?

0

Potrafi to ktoś przekształcić chociaż tak żeby funkcja nie uruchamiała się od razu i napis był w całości przez te 2 sekundy ?

1 użytkowników online, w tym zalogowanych: 0, gości: 1