arc(x, y, radio, angulo-inicio, angulo-fin, sentido-giro[true o false])
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:
Entradas
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.