marArt2/js2.js at main · 203i/marArt2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
function draw2()//animation drawing 2 lines purple and red on canvas
	{


		var pos = 0  ; //element position
			var pos2 = 200  ; // element2 position
			var elem = Array.from(document.getElementsByClassName("animation")); //aray.from let us use foreach function so we can work on all classes same time live

			var  i = 0 ;


				elem.forEach(anim) // for all elements in elem array
						function anim(element){ //the element is an class(n) so if we have aray with 2 classes it will do it for elem 1 then elem 2 as n


					var id = setInterval( klatka , 50 ); //  setInterval (odswieza element) klatka (element) 5(czas milisek)

					var ctx = element.getContext("2d");


				function klatka(){

						if(pos!=160){
							pos++;
							ctx.beginPath();
							ctx.strokeStyle="red";
							ctx.moveTo(pos,0);
							ctx.lineTo(pos,200);
							ctx.stroke();

						}
						else{


							clearInterval(id);


						}
					}

				}


	}
	function draw()//animation drawing 2 lines purple and red on canvas
	{


		var pos = 0  ; //element position

			var elem = Array.from(document.getElementsByClassName("animation")); //aray.from let us use foreach function so we can work on all classes same time live

			var  i = 0 ;


				elem.forEach(anim) // for all elements in elem array
						function anim(element){ //the element is an class(n) so if we have aray with 2 classes it will do it for elem 1 then elem 2 as n


					var id = setInterval( klatka , 50 ); //  setInterval (odswieza element) klatka (element) 5(czas milisek)

					var ctx = element.getContext("2d");


				function klatka(){

						if(pos!=400){
						pos++;
							ctx.beginPath();
							ctx.strokeStyle="purple";
							ctx.moveTo(pos,110);
							ctx.lineTo(pos,200);
							ctx.stroke();


						}
						else{


							clearInterval(id);


						}
					}

				}


	}

				function move(){ // is moving div
			var pos = 0  ; <!-- pozycja w jakiej znajduje sie element
			var elem = document.getElementById("animation1"); <!-- element do ktorego pozycje zmieniamy
			var id = setInterval( klatka , 5 ) <!--  setInterval (odswieza element) klatka (element) 5(czas milisek)
			 function klatka(){

					if ( pos == 230 ) {

						clearInterval(id);
					}

					else {

						pos++;

							elem.style.left = pos + "px";

					}
				}

		}