JavaScript - Animacion Canvas

   
Vista:

Animacion Canvas

Publicado por Adrian rcz_k01@hotmail.com (1 intervención) el 02/03/2018 14:02:47
Buenos dias señores

Les traigo una duda que me lleva una semana quebrando la cabeza, estoy intentando crear una animacion mediante trazos de canvas (lineTo()),

Les dejo el codigo que llevo trabajado:

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
var x=0;
var dx=1;
var x1=0;
 
function draw(){
    context = document.getElementById('canvas').getContext('2d');
 
    context.clearRect(0, 0, 500, 500);
    context.strokeRect(0,0,500,500);
 
    context.globalCompositeOperation='destination-over';
 
    if (x<200){
        var y=x*x/100;
        context.lineTo(x, y);
        context.stroke();
        x += dx;
    }
    else{
        if (x==200){
            context.translate(x, y);
        }
 
        y1=x1;
        context.lineTo(x1, y1);
        context.stroke();
        x1 += dx;
    }
 
 
    animacion = window.requestAnimationFrame(draw);
}
 
function iniciar_animacion(){
    window.requestAnimationFrame(draw);
}
 
function iniciar(){
    context.beginPath();
    x1=0;
    x=0;
    window.cancelAnimationFrame(animacion);
    window.requestAnimationFrame(draw);
}
 
function limpiar(){
    window.cancelAnimationFrame(animacion);
    context.beginPath();
    context.clearRect(0, 0, 500, 500);
    context.strokeRect(0, 0, 500, 500);
 
}
 
function btns(){
    document.getElementById('btn_iniciar').onclick=iniciar;
    document.getElementById('btn_limpiar').onclick=limpiar;
}
 
window.addEventListener('load', iniciar_animacion, false);
window.onload=btns;

Le añadi un par de botones al html para hacer pruebas, les dejo el codigo html tambien por si quieren echarle un vistazo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejemplo</title>
    <script src="canvas.js"></script>
    <link rel="stylesheet" href="style.css">
 
</head>
<body>
    <div class="main">
        <h1>Ejemplo canvas</h1>
        <div class="btns">
            <input type="button" id="btn_iniciar" value="Iniciar">
            <input type="button" id="btn_limpiar" value="Limpiar">
        </div>
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
 
</body>
</html>

Lo que pretendo es de alguna manera enlazar funciones matematicas respecto x e y, pero que la segunda comienze donde termina la primera, y asi sucesivamente, pense en translate(), pero tengo bastante problemas para formar la animacion, les agradezco cualquier ayuda posible, 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 xve

Animacion Canvas

Publicado por xve (2010 intervenciones) el 02/03/2018 18:08:50
No se si te entiendo muy bien, pero cuando indicas stroke() reinicializas el puntero... si no lo ejecutas, el puntero sigue en el ultimo punto donde ha terminado el último dibujo.
No se si es esto lo que preguntas!!!

He probado tu código y esta muy bien!!!
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
Revisar política de publicidad