Estoy tratando de hacer que una bola hecha por la función .arc crezca con el tiempo, y quiero poder especificar la duración. aquí es donde estoy atascado:
function start(){ var ball1,ball2,ball3,ball4; var ball=document.getElementById("MyCanvas"); ball1=ball.getContext("2d"); ball1.fillStyle="yellow"; ball1.beginPath(); ball1.arc(95,50,40,0,2*Math.PI); ball1.fill(); scaling(ball1); } function scaling(ball){ ball.beginPath(); ball.arc(95,50,100,0,2*Math.PI); } window.addEventListener("load",start,false); body{background-color:white;} <canvas id="MyCanvas" width="1000" height="500" style="border:black 1px solid"></canvas>Entonces, ¿hay alguna manera de hacerlo con .arc? y si no, alguna otra forma de hacerlo? (como borde-radio: 50%).
En realidad, ball debería contener todos los datos de... una pelota. En su lugar, lo establece igual que el lienzo:
var ball = document.getElementById("MyCanvas");...y usa ball1 para el contexto
ball1 = ball.getContext("2d");En primer lugar, debe cambiar el nombre de esas variables a otra cosa.
var canvas, context; var ball; function start(){ canvas = document.getElementById("MyCanvas"); context = canvas.getContext("2d"); } window.addEventListener("load",start,false);y luego necesitas pensar en un bucle de animación y todo tipo de otras cosas...
Quizás deberías pensar en algo mucho más simple como usar CSS puro.
.circle{ width: 50px; height: 50px; transition: all 1s; background: yellow; border-radius: 50%; cursor: pointer; } .circle:hover{ width: 100px; height: 100px; } <div class="circle"></div>