Arcos y círculos
Para dibujar círculos o segmentos circulares, utilizamos una serie de métodos() y propiedades de <canvas>.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| lineWidth | context.lineWidth = numero; | Determina (sets) o devuelve (returns) la grosor de la línea. | 1 |
| strokeStyle | context.strokeStyle = color | gradient | pattern; | Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea. | negro |
| fillStyle | context.fillStyle = color | gradient | pattern; | Determina o devuelve el color, gradiente o patrón del relleno. | negro |
| beginPath() | context.beginPath(); | Empezamos a dibujar | |
| arc() | context.arc(x, y, r, ap, af , cR) |
Define un segmento circular. x y = coordenadas centro r = radio ap = ángulo de partida en radianes af = ángulo final en radianes cR = opcional; sentido contra reloj: true | false |
|
| arcTo() | context.arcTo(x1,y1,x2,y2,r); | Crea un arco de círculo entre dos tangentes x1, y1 y x2, y2 |
|
| fill() | context.fill(); | Rellena una forma geométrica. | black |
| stroke() | context.stroke(); | Dibuja una línea ya definida. |
Vea la chuleta con las propiedades y metodos() de canvas.
Repaso de geometría
En el canvas para trabajar con ángulos, utilizamos radianes.
Un circulo completo tiene 2π radianes, con lo cual podemos escribir:
360° = 2π rad;
o si hablamos JavaScript: 2*Math.PI;
Para convertir grados sexagesimales a radianes utilizamos la siguiente fórmula:
radianes = (π / 180) * grados;
lo que traducido a JavaScript es:
var radianes = (Math.PI / 180) * grados;
Dibujar un arco
Para dibujar un arco utilizamos el método arc(x, y, r, ap, af, aC), donde
- x e y son las coordenadas del centro,
- ap es el ángulo de partida ( en radianes ),
- af es el ángulo final ( en radianes ), y
- cR ( contra reloj ) es la dirección.
El parametro cR puede tomar dos valores:
- true ( verdadero, o sea: en sentido contrario al de las agujas del reloj ) y
- false ( falso, o sea: en el sentido de las agujas del reloj ).
var elCanvas = document.getElementById("arco");
if (elCanvas && elCanvas.getContext) {
var context = elCanvas.getContext("2d");
if (context) {
var X = elCanvas.width/2;
var Y = 100;
var r = 50;
var aPartida = (Math.PI / 180) * 220;
var aFinal = (Math.PI / 180) * 320;
context.strokeStyle = "orange";
context.lineWidth = 15;
context.arc(X,Y,r,aPartida,aFinal,false);
context.stroke();
}
}Dibujar un círculo
Para dibujar un círculo hay que trazar un arco de 360° ( 2π radianes ). Para esto utilizamos el método arc().
contexto.arc(X,Y,r,0,2*Math.PI);Donde:
- X e Y son las coordenadas del centro,
- r es el radio del circulo,
- el ángulo de partida ap = 0 y
- el ángulo final (en radianes) af = 2*Math.PI ( o sea: 360ยบ )
var lienzo = document.getElementById("lienzo");
if (lienzo && lienzo.getContext) {
var contexto = lienzo.getContext("2d");
if (contexto) {
var X = lienzo.width/2;
var Y = lienzo.height/2;
var r = 75;
contexto.strokeStyle = "#006400";
contexto.fillStyle = "#6ab150";
contexto.lineWidth = 5;
contexto.arc(X,Y,r,0,2*Math.PI);
contexto.fill();
contexto.stroke();
}
}Más geometría
Para calcular las coordenadas de un punto en la circunferencia de un círculo utilizamos las siguientes fórmulas:
var x = centroX + r * Math.cos(a);
var y = centroY + r * Math.sin(a);
Donde centroX y centroY son las coordenadas del centro del círculo;
r es el radio del círculo;
y a es el ángulo entre el punto 0π y este punto.
Dibujar un sector circular
A continuación vamos a dibujar un sector circular de 60°, donde el ángulo de partida ap = 60° y el ángulo final af = 120°.
Necesitamos definir algunas variables:
El centro del circulo (X,Y) cuyo sector vamos a dibujar, y el radio R de este.
var X = canvas.width/2;
var Y = 30;
var R = 140;
El ángulo de partida ap y el ángulo final af
var ap = (Math.PI / 180) * 60;
var af = (Math.PI / 180) * 120;
Las coordenadas del punto de partida en la circunferencia
var Xap = X+R * Math.cos(ap);
var Yap = Y+R * Math.sin(ap);
También hay que definir el color de relleno fillStyle y el color del borde strokeStyle.
Veamos el código.
var canvas = document.getElementById("sectorCircular");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
// El centro del circulo (X,Y) cuyo sector vamos a dibujar, y el radio R de este.
var X = canvas.width/2;
var Y = 30;
var R = 140;
// El ángulo de partida ap y el ángulo final af
var ap = (Math.PI / 180) * 60;
var af = (Math.PI / 180) * 120;
// Las coordenadas del punto de partida en la circunferencia
var Xap = X+R * Math.cos(ap);
var Yap = Y+R * Math.sin(ap);
// estilos
ctx.fillStyle = "#abcdef";
ctx.strokeStyle = "#1E90FF";
ctx.lineWidth = 5;
// empezamos a dibujar
ctx.beginPath();
ctx.moveTo(X,Y);
ctx.lineTo(Xap,Yap);
ctx.arc(X,Y,R,ap,af);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}