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:
Mensajes realizados anteriormente (No estaban la última vez que entraste)Problema con canvas
Jean (09/12/2020 12:14:26)139 visitas
3 respuestas
Mensajes realizados anteriormente (No estaban la última vez que entraste)(+2)Problema con canvas
Alejandro (09/12/2020 19:08:46)
Mensajes realizados anteriormente (No estaban la última vez que entraste)Problema con canvas
Jean (09/12/2020 21:30:17)
Mensajes realizados anteriormente (No estaban la última vez que entraste)(+1)Problema con canvas
Alejandro (10/12/2020 00:04:39)
sin imagen de perfil
Val: 29
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 (9 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.439
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con canvas

Publicado por Alejandro (332 intervenciones) el 09/12/2020 19:08:46
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: 29
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 (9 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.439
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema con canvas

Publicado por Alejandro (332 intervenciones) el 10/12/2020 00:04:39
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