arc(x, y, radio, angulo-inicio, angulo-fin, sentido-giro[true o false])
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgturvm6Yyvi7ZA047SuCTHh1q9vMgo7efd4XgMd8P_cQwTk0apg1OkHc4F8VXS9rAaLx2FGucu3rjEbWWRI_UIDfuJjMr9hFBV2XAbvbWfZKo2RaxRanmyzh6WKUF6wGjS1Fop14Mdz3Q/s320/arco.gif)
El angulo de inicio y fin no se expresan en grados sino en radianes. 6,2831853 radianes (PI*2) equivalen a 360 grados. Podemos obtener los radianes a partir de los grados con este cálculo:
radianes = (Math.PI/180)*grados
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function dibujo(){
var canvas = document.getElementById("dibujo").getContext('2d');
var calculoRadian = Math.PI/180;
var gradoInicio1 = 0;
var gradoFin1 = calculoRadian * 360;
var gradoInicio2 = 0;
var gradoFin2 = calculoRadian * 360;
var gradoInicio3 = 0;
var gradoFin3 = calculoRadian * 90;
//Circulo
canvas.beginPath();
canvas.arc(360,150,50,gradoInicio1,gradoFin1,false);
canvas.fill();
//Arco relleno
canvas.beginPath();
canvas.arc(120,150,50,gradoInicio2,gradoFin2,false);
canvas.stroke();
//Circulo relleno
canvas.beginPath();
canvas.arc(200,120,80,gradoInicio3,gradoFin3,false);
canvas.fill();
}
</script>
</head>
<body onLoad="dibujo()">
<canvas id="dibujo" width="500" height="300"></canvas>
</body>
</html>
Resultado:![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6INHvx2CCBy2c0ydCRocZKMRyiVZxVSwGEOwSlSgELyOWvZJC5f-QJ8Y0y7zUz0SCa9_IEY1YyKOrJp9J__chznyPXf4KCwws_02W5H3YZC-VEMVz27wjziEtpTdW_-aW0oMT6Oi4G0/s320/canvas-3.gif)
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.