Estoy tratando de hacer una animación de un amanecer, así que necesito un círculo que crezca en tamaño. En este momento estoy usando un arco, pero mi sol no crece en cada fotograma, por lo que permanece estático. Intenté llamar a otra función, pero no estoy seguro de cómo hacerlo o si falta algo en el código que ya hice. Este es el código que he escrito hasta ahora.
<!doctype html> <html> <head> <title>Animacion</title> </head> <body onload="call()"> <!--canvas--> <canvas id="canvas" width="300" height="300" style="border: 1px solid black"></canvas> <script> function call() { window.requestAnimationFrame(draw); } function draw() { //context var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0, 0, 300, 300); ctx.fillStyle = "green"; ctx.strokeStyle = "green"; ctx.save(); //ground ctx.beginPath(); ctx.rect(0, 200, 300, 100); ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.save(); //sun size var sunSize = 50; //sun ctx.beginPath(); ctx.strokeStyle = "yellow"; ctx.fillStyle = "yellow"; ctx.arc(145, 220, sunSize, sunSize, 0, Math.PI * 2, true); ctx.fill(); ctx.stroke(); sunSize = sunSize + 5; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.save(); //sky ctx.save(); ctx.beginPath(); ctx.strokeStyle = "cyan"; ctx.fillStyle = "cyan"; ctx.rect(0, 0, 300, 300); ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.save(); window.requestAnimationFrame(draw); } call(); </script> </body> </html> Intenté usar otra función dentro de draw() pero básicamente no hace nada y borra el cielo que tengo.
usted sunSize dentro de su función draw() para que restablezca sunSize a 50 cada vez que se ejecuta. mueva sunSize fuera de la función de dibujo debajo de la parte <script> aquí;
<script> var sunSize = 50; function call(){ window.requestAnimationFrame(draw); } etc, etc también, en lugar de usar sunSize = sunSize + 5 use sunSize += 5 . significan exactamente lo mismo solo que escrito más rápido. Sin embargo, 5 puede ser un poco rápido. intenta usar 0.1 o 0.2