Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Crear una animación sencilla utilizando el canvas y JavaScript

JavaScript - Crear una animación sencilla utilizando el canvas y JavaScript

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Crear una animación sencilla utilizando el canvas y JavaScript

Publicado por daniel (6 intervenciones) el 04/11/2021 04:31:07
Hola buenas tardes,
soy nuevo en esto y queria ver si me podrian apoyar en animar un circulo con JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
 
//ctx.arc(x, y, radio, angulo inicial, angulo final, contrario a las manecillas)
ctx.fillStyle="yellow";
ctx.strokeStyle="blue";
 
for (var i = 0; i <= 2; i = i + 0.2) {
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.arc(190 * i - 10 ,150,15,0, Math.PI * i, false);
  document.write("Angulo final " + Math.PI * i + "<br>");
  ctx.stroke();
  ctx.fill();
}

Dado el ejemplo anterior, realizarás una animación en la que se muestra cómo se va construyendo un círculo usando el método arc y los efectos de modificar el ángulo final desde 0 hasta 2π (2 * PI). Elabora el código que dibuje una animación similar utilizando los métodos revisados hasta este momento.
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 algoritmo
Val: 37
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear una animación sencilla utilizando el canvas y JavaScript

Publicado por algoritmo (29 intervenciones) el 04/11/2021 11:57:17
Hola

Es ésto lo que buscas ???

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<canvas id='canvas' width='2500' height='200'>
 
    </canvas>
    <script>
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
 
        ctx.fillStyle="yellow";
        ctx.strokeStyle="blue";
 
        for (var i = 0; i <= 2; i = i + 0.2) {
          ctx.beginPath();
          ctx.lineWidth = 5;
          ctx.arc(190 * i - 10 , 150,  // centro
                  15,                  // radio
                  0, Math.PI * i,      // angulos inicial y final
                  false);              // contrario manecillas
          document.write("<br>" + "Angulo final " + Math.round(i*100)/100 + ' \u03C0');
          ctx.stroke();
          ctx.fill();
        }
 
    </script>
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
sin imagen de perfil

Crear una animación sencilla utilizando el canvas y JavaScript

Publicado por daniel (6 intervenciones) el 07/11/2021 21:23:48
Hola buscaba que se animara el circulo
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 algoritmo
Val: 37
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear una animación sencilla utilizando el canvas y JavaScript

Publicado por algoritmo (29 intervenciones) el 07/11/2021 22:36:24
Eso obliga a dos cosas: Ponerle siempre el mismo centro y escribir un temporizador.

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
<!DOCTYPE HTML>
 
<html>
    <body>
 
        <canvas id='canvas' width='2500' height='200'>
        </canvas>
        <p id='texto'></p>
        <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            var i = 0;
 
            ctx.fillStyle="yellow";
            ctx.strokeStyle="blue";
 
            function dibuja(){
                ctx.beginPath();
                ctx.lineWidth = 5;
                ctx.arc(20 , 150,  // centro
                        15,                  // radio
                        0, Math.PI * i,      // angulos inicial y final
                        false);              // contrario manecillas
                document.getElementById('texto').innerHTML += "<br>" + "Angulo final " + Math.round(i*100)/100 + ' \u03C0';
                ctx.stroke();
                ctx.fill();
                i += 0.2
                if (i > 2){
                    acabar();
                }
            }
 
            var temporizador=setInterval(function(){dibuja()},80);
            function acabar(){
                clearInterval(temporizador); // Paramos la ejecución del método, indicando la variable creada al final
            }
            document.close();
        </script>
 
    </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
sin imagen de perfil

Crear una animación sencilla utilizando el canvas y JavaScript

Publicado por daniel (6 intervenciones) el 08/11/2021 02:24:14
Muchisimas gracias bro!!
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