Índice

Diseño de formas geométricas

Para diseñar arcos y círculos, se puede utilizar la función arc(x, y, radio, anguloInicial, anguloFinal, sentidoInverso).

Este método contiene cinco parámetros: x e y son las coordenadas del centro del círculo y radio es su radio. Los parámetros anguloInicial y anguloFinal definen los puntos de partida y de llegada del arco en radianes, medidos a partir del eje x. El parámetro sentidoInverso es un valor booleano que, cuando vale true, diseña el arco en sentido inverso al de las agujas del reloj. De otro modo (false), el diseño se realiza en el sentido de las agujas del reloj.

Destaquemos que los ángulos definidos están expresados en radianes y no en grados.

images/CAP22IMG10.png
<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<canvas id="dibujo" width="200px" height="200px" 
style="border: 1px solid black"> 
Su navegador no soporta la etiqueta canvas. 
</canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("dibujo"); 
var contexto = canvas.getContext("2d"); 
contexto.fillStyle = "#99ccff"; 
contexto.lineWidth = 2; 
contexto.beginPath(); 
contexto.arc(85, 85, 70, 0, 2*Math.PI, true); 
contexto.fill(); 
contexto.beginPath();  ...