Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Problema con canvas

JavaScript - Problema con canvas

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 59
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con canvas

Publicado por Jean (22 intervenciones) el 09/12/2020 12:14:26
hola, tengo un problema con este codigo, genera un canvas con un cuadrado que cada segundo va rotando cuando preciono el boton pero por algun motivo solo rota una vez y no se mantiene rontando, alguien puede ver el error?
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
<!doctype html>
<head>
    <script>
        function iniciar()
        {
            var elemento = document.getElementById("lienzo");
            var lienzo = elemento.getContext("2d");
            lienzo.translate(500,500)
            var fecha = new Date()
            var segundos = fecha.getSeconds()
            lienzo.save()
            var rad = (segundos*6*Math.PI)/180
            lienzo.rotate(rad)
            lienzo.fillStyle="#FF0000"
            lienzo.fillRect(0,0,100,100)
            lienzo.restore()
        }
        function animacion(){
            setInterval(iniciar,1000)
        }
    </script>
</head>
<body>
    <canvas id="lienzo" width="1000" height="1000"></canvas>
    <button onclick="animacion()">Rotar</button>
</body>
Gracias
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
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con canvas

Publicado por Alejandro (540 intervenciones) el 09/12/2020 19:08:46
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Porque en la función iniciar redefines el lienzo cada segundo.
Quizá algo así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <canvas id="lienzo" width="1000" height="1000"></canvas>
    <button onclick="animacion()">Rotar</button>
    <script>
        var elemento = document.getElementById("lienzo");
        var lienzo = elemento.getContext("2d");
        lienzo.translate(500,500)
 
	function iniciar()
        {
            var fecha = new Date()
            var segundos = fecha.getSeconds()
            lienzo.save()
            var rad = (segundos*6*Math.PI)/180
            lienzo.rotate(rad)
            lienzo.fillStyle="#FF0000"
            lienzo.fillRect(0,0,100,100)
            lienzo.restore()
        }
        function animacion(){
            setInterval(iniciar,1000)
        }
    </script>
</body>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 59
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con canvas

Publicado por Jean (22 intervenciones) el 09/12/2020 21:30:17
gracias, pero de esta forma aun se ven los fotogramas anteriores, hay alguna forma de solo mostrar en pantalla el fotograma actual??'
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
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con canvas

Publicado por Alejandro (540 intervenciones) el 10/12/2020 00:04:39
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Limpias el lienzo antes de dibujar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
	<canvas id="lienzo" width="1000" height="1000"></canvas>
	<button onclick="animacion()">Rotar</button>
	<script>
		var elemento = document.getElementById("lienzo");
		var lienzo = elemento.getContext("2d");
		lienzo.translate(500,500)
 
		function iniciar()
		{
			lienzo.clearRect(-1, -1, lienzo.canvas.width, lienzo.canvas.height);
			var rad = 6 * Math.PI / 180
			lienzo.rotate(rad)
			lienzo.fillStyle="#FF0000"
			lienzo.fillRect(0,0,100,100)
		}
		function animacion(){
			setInterval(iniciar,1000)
		}
	</script>
</body>
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