JavaScript - No se como hacer una funcion cambiar, para un semaforo-- soy nueva

   
Vista:

No se como hacer una funcion cambiar, para un semaforo-- soy nueva

Publicado por Martha Leon Rodriguez (2 intervenciones) el 22/03/2016 22:30:15
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
<html>
 
	<head lang="es">
		<meta charset="UTF-8">
		<title>CAMBIAR SEMAFORO</title>
 
		<script>
 
			var lienzo;
			var ctx;
			window.onload=function()
			{
				lienzo=document.querySelector("#circulo1");
				ctx=lienzo.getContext("2d");
 
				cx=100;
				cy=100;
				r=50;
				ai=0;
				af=Math.PI*2;
 
				ctx.beginPath();
				ctx.arc(cx,cy,r,ai,af,false);
				ctx.lineWidth=5;
				ctx.strokeStyle="black";
				<!--ctx.fillStyle="green";
				<!--ctx.fill();
				ctx.stroke();


				lienzo=document.querySelector("#circulo2");
				ctx=lienzo.getContext("2d");

				ctx.beginPath();
				ctx.arc(cx,cy,r,ai,af,false);
				ctx.lineWidth=5;
				ctx.strokeStyle="black";
				<!--ctx.fillStyle="yellow";
				<!--ctx.fill();
				ctx.stroke();


				lienzo=document.querySelector("#circulo3");
				ctx=lienzo.getContext("2d");

				ctx.beginPath();
				ctx.arc(cx,cy,r,ai,af,false);
				ctx.lineWidth=5;
				ctx.strokeStyle="black";
				<!--ctx.fillStyle="red";
				<!--ctx.fill();
				ctx.stroke();

			}

			<!-- NOTA: Y ES AQUI DONDE NO SE COMO HACER PARA QUE CADA CIRCULO VAYA CAMBIANDO DE COLOR

			function cambiar(circulo1,circulo2,circulo3)
			{	
				<!--for(var i=0;i<circulo.length;i++)
				<!---{_
					if(n==1)
					{
					circulo1.fillStyle="green";
					circulo2.fillStyle="yellow";
					circulo3.fillStyle="red";
					ctx.fill();
					var myTimer=setInterval(cambiar,1000);
					
					}

				<!--}--

			}

		</script>	

	</head>

		<body>
		<center>
			<canvas id="circulo1" width="200" height="200" style= "border: 1px solid #000000">
			</canvas>

			<canvas id="circulo2" width="200" height="200" style= "border: 1px solid #000000">
			</canvas>

			<canvas id="circulo3" width="200" height="200" style= "border: 1px solid #000000">
			</canvas>

		</body>

	</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

URGENTE! no se como hacer una funcion cambiar, para un semaforo-- soy nueva-AYUDA POR FAVOR

Publicado por arck (74 intervenciones) el 23/03/2016 08:41:55
Aqui lo tienes para uno solo.

Ahora te toca repetirlo.

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
<html>
 
<head lang="es">
<meta charset="UTF-8">
<title>CAMBIAR SEMAFORO</title>
 
<script>
 
    var lienzo,ctx1,ctx2,ctx3;
 
    window.onload=function(){
 
        cx=100;
        cy=100;
        r=50;
        ai=0;
        af=Math.PI*2;
 
        lienzo=document.querySelector("#circulo1");
        ctx1=lienzo.getContext("2d");
 
        ctx1.beginPath();
        ctx1.arc(cx,cy,r,ai,af,false);
        ctx1.lineWidth=5;
        ctx1.strokeStyle="black";
        ctx1.stroke();
 
 
 
}
 
    // NOTA: Y ES AQUI DONDE NO SE COMO HACER PARA QUE CADA CIRCULO VAYA CAMBIANDO DE COLOR
   function cambiar(){
 
        ctx1.fillStyle="green";
        ctx1.fill();
 
 
    }
 
    setInterval('cambiar()',3000);
</script>
 
</head>
 
<body>
<center>
<canvas id="circulo1" width="200" height="200" style= "border: 1px solid #000000">
</canvas>
 
</canvas>
 
 
</body>
 
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

URGENTE! no se como hacer una funcion cambiar, para un semaforo-- soy nueva-AYUDA POR FAVOR

Publicado por Martha (2 intervenciones) el 23/03/2016 16:55:56
Genial, muchas gracias por tu ayuda.
Que tengas un buen dia
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar