Animacion Canvas
Publicado por Adrian (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:
Le añadi un par de botones al html para hacer pruebas, les dejo el codigo html tambien por si quieren echarle un vistazo:
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
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
0
