Para dibujar un círculo en el canvas, no disponemos de una función específica, es necesario dibujar un arco cerrado y después pintar su interior.
En el siguiente código la función que se encarga de dibujar el círculo recibe 4 parámetros, las coordenadas (x, y) donde se dibujará el círculo, su radio y el color de relleno.
<html>
<head><title>ball html5</title></head>
<body>
<canvas id="c" width="200" height="200"></canvas>
<script type="text/javascript">
var canvas, ctx;
function drawBall(x,y,r,color){
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
function clear(){
canvas.width = canvas.width;
}
function init(){
canvas = document.getElementById("c");
ctx = canvas.getContext("2d");
setInterval(loop, 1000/30);
}
function loop(){
clear();
drawBall(100,100,20,"#007eff");
}
window.onload = init;
</script>
</body>
</html>
El código es completamente funcional para que creéis directamente un .html y veáis como funciona. La estructura es la clásica que ya he introducido en otros tutoriales, una función de inicialización donde configuro los objetos que referencian al canvas y su contexto y una función loop, que itera constantemente pintando el canvas a 30 fotogramas por segundo.
Un saludo a todos!
No hay comentarios:
Publicar un comentario