Terminamos de elaborar la animación del vídeo anterior y creamos un ejemplo de animación con el evento mousemove.

Para más cursos, manuales y ejercicios: http://www.pildorasinformaticas.com

source

1 Comentario

  1. Que bueno este video. Aun no acabo de ver eso de llamar a una funcion mediante addEventListener ("mousemove",animacion,false) y que la función reciba un parámetro denominado 'e'. Que representa esa 'e'? que objeto se genera con la llamada de la funcion?

    Espero que esos videos que te has propuesto hacer de Javascript sean igual de interesantes y lleguen en breve.

    Muchas gracias de antemano, un saludo.

  2. pildorasinformaticas gracias por su tiempo, si me ayudara con un inconveniente que se me esta presentando se lo agradeceria. le explico la situacion estoy haciendo un paint, pero se me ha presentado el inconveniente que cuando estoy desarrollando las autoformas. le digo yo a autoformas dibujar figuras como  rectangulos, circulos. resulta ser que si me dibuja pero el problema es que cuando lo hago hay un detalle que cuando lo agrando o lo minimiso salen lineas por cada ves que se dispara el evento mousemove, si me daria su correo yo se lo mandara para que lo chequeara he dado y he dado con varias formas de resolver el problema pero nada que lo puedo solucionar

  3. Me pasa algo que no tengo ni idea porque sucede… la animación no me funcionaba y me di cuenta que se debía a los valores que uso…. si uso valores de un dígito, todo perfecto …pero si uso de dos dígitos, no funciona????????????????????????????????????????????????????????? a qué se debe esto???

  4. Que tal profe muchas gracias por sus cursos son de gran utilidad, quisiera preguntarle si es posible tener dos pelotas al mismo tiempo en el mismo canvas? o si es posible sobreponer dos canvas para hacer dos animaciones al mismo tiempo?

    Muchas gracias

  5. no aparecen los circulos negros y mi codigo es igual al tuyo excepto por el tamaño del lienzo pero tendria que funcionar porque no hay errorres en el codigo, aqui te dejo lo que hice:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento sin título</title>

    <style>

    #lienzo{
    border:1px solid #000;
    }

    }
    </style>

    <script>

    var y=100;

    var estado="bajando";

    var arriba=y;

    var horizontal=0;

    function comenzar(){
    var elemento=document.getElementById("lienzo");

    lienzo=elemento.getContext("2d");

    window.addEventListener("mousemove",animacion,false);

    }

    function animacion(e){

    lienzo.clearRect(0,0,900,600);

    var xdelraton=e.clientX;

    var ydelraton=e.cleintY;

    var xcentro=550;

    var ycentro=325;

    var angulo=Math.atan2(xdelraton-xcentro.ydelraton-ycentro);

    var x=xcentro+Math.round(Math.sin(angulo)*10);

    var y=ycentro+Math.round(Math.cos(angulo)*10);

    lienzo.beginPath();

    lienzo.arc(xcentro,ycentro,20,0,Math.PI*2,false);

    lienzo.moveTo(620,325);

    lienzo.arc(600,ycentro,20,0,Math.PI*2,false);

    lienzo.stroke();

    lienzo.beginPath();

    lienzo.arc(x,y,10,0,Math.PI*2,false);

    lienzo.moveTo(x,y);

    lienzo.arc(x+50,y,10,0,Math.PI*2,false);

    lienzo.fill();

    }

    window.addEventListener("load",comenzar,false);
    </script>

    </head>

    <body>

    <section>

    <canvas width="900" height="600" id="lienzo">

    </canvas>

    </section>

    </body>

    </html>

    agradecería mucho si me dijeras que tengo mal

  6. no encuentro mi problema tengo el script

    <script>
    var y=300;
    var estado="bajando";
    var arriba=y;
    var horizontal=0;

    function comenzar(){
    var elemento=document.getElementById("lienzo");
    lienzo=elemento.getContext("2d");
    window.addEventListener("mousemove", animacion, false);

    }
    function animacion(e){

    lienzo.clearRect(0,0,1200,800);
    var xdelraton=e.clientX;
    var ydelraton=e.clientY;
    var xcentro=450;
    var ycentro=325;
    var angulo=Math.atan2(xdelraton-xcentro,ydelraton-ycentro);

    var x=xcentro+Math.round(Math.sin(angulo)*10);
    var y=ycentro+Math.round(Math.cos(angulo)*10);
    lienzo.beginPath();
    lienzo.arc(xcentro,ycentro,20,0,Math,PI*2, false);
    lienzo.moveTo(620,325);

    lienzo.arc(600,ycentro,20,0,Math,PI*2, false);
    lienzo.stroke();

    lienzo.beginPath();
    lienzo.arc(x,y,10,0,Math,PI*2, false);
    lienzo.moveTo(x,y);

    lienzo.arc(x+50,y,10,0,Math,PI*2, false);
    lienzo.fill();
    }
    window.addEventListener("load",comenzar,false);
    </script>

  7. <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento sin título</title>
    <style>#lienzo{
     border:1px solid #F00;
     
    }
    </style>
    <script>var y=300;var estado="bajando";var arriba=y;var horizontal=0;function comenzar(){
     
     var elemento=document.getElementById("lienzo");
     
     lienzo=elemento.getContext("2d");
     
     window.addEventListener("mousemove",animacion,false);
     
      
    }function animacion(e){
     
     lienzo.clearRect(0,0,1200,900);
     
     var xdelraton=e.clientX;
     
     var ydelraton=e.clientY;
     
     var xcentro=550;
     
     var ycentro=325;
     
     var angulo=Math.atan2(xdelraton-xcentro,ydelraton-ycentro);
     
     var x=xcentro+Math.round(Math.sin(angulo)*10);
     
     var y=ycentro+Math.round(Math.cos(angulo)*10);
     
     lienzo.beginPath();
     
     lienzo.arc(xcentro,ycentro,20,0,Math.PI*2,false);
     
     lienzo.moveTo(620,325);
     
     lienzo.arc(600,ycentro,20,0,Math.PI*2,false);
     
     lienzo.stroke();
     
     lienzo.beginPath();
     
     lienzo.arc(x,y,10,0,Math.PI*2,false);
     
     lienzo.moveTo(x,y);
     
     lienzo.arc(x+50,y,10,0,Math.PI*2,false);
     
     lienzo.fill();
     
    }window.addEventListener("load",comenzar,false);
    </script></head><body>
    <section><canvas width="1200" height="900" id="lienzo">
    </canvas></section>
    </body>
    </html>

  8. =/ buenas noches, de nuevo yo con mis dudas (y gratitud por los cursos como siempre) el caso es que no se me dibujan esferas sino óvalos y no se xq y no encuentro como arreglarlo. el codigo es exacto al del curso y a lo que encuentro en internet =/

  9. Lo primero felicidades por tus tutoriales. Creo que es el quinto que hago de tu canal y ya tu voz es una más en mi casa.
    Unicamente para hacer una puntualización: en las lineas 50-54 de tu archivo al grabar este vídeo están los valores al revés: al principio me pregunté cómo estando cambiados funcionaban las cosas pero es que la orden en la que aparece el arco tangente tiene los parámetros cambiados ( x,y), en vez de ( y,x) que es como debe ser, según en visto por ahí, PERO en las dos siguientes, cuando se calculan las coordenadas de "x" e " y" , donde has puesto "seno" deberías haber puesto "coseno" y en la otra al revés.
    De informática estoy aprendiendo MUCHISIMO con tus videos. Pero mi profesión durante 37 años fue de profesor de Matemáticas… Dejo las lineas tal y como deben ser correctamente escritas.

    var angulo=Math.atan2(ydelraton-ycentro,xdelraton-xcentro);
    var x= xcentro+Math.round(Math.cos(angulo)*10);
    var y= ycentro+Math.round(Math.sin(angulo)*10);

    Saludos a todos

  10. trate de hacer que la pelota deje de rebotar pero sigue rebotando siempre, algo esta mal?

    <script>

    var y = 300;

    var estado = "bajando";

    var arriba = y;

    function comenzar(){

    var elemento = document.getElementById("lienzo")

    lienzo = elemento.getContext("2d");

    setInterval(animacion,50);

    }

    function animacion(){

    if(y<850 && estado=="bajando"){

    lienzo.clearRect(0,0,1200,900);

    lienzo.beginPath();

    lienzo.arc(500,y,40,0,Math.PI*2,false);

    lienzo.fill();

    y=y+50;

    }

    if(y==850){

    arriba+50;

    estado="subiendo"

    }

    if(y>=arriba && estado=="subiendo"){

    lienzo.clearRect(0,0,1200,900);

    lienzo.beginPath();

    lienzo.arc(500,y,40,0,Math.PI*2,false);

    lienzo.fill();

    y=y-50;

    }

    if(y==arriba){

    estado="bajando";

    }

    }

    window.addEventListener("load", comenzar, false);

    </script>

Dejar respuesta

Please enter your comment!
Please enter your name here