¿Eres un diseñador web en busca de nuevas herramientas para dar vida a tus proyectos? El lienzo HTML5 es una de las más populares y versátiles. En este artículo te enseñaremos a crear círculos y arcos con facilidad, para que puedas darle un toque aún más creativo a tus diseños. ¡No te lo pierdas!
A crear círculos (arcos) en HTML5 Canvas, podemos usar el arc()
método. Los arcos se definen por un punto central, un radio, un ángulo inicial, un ángulo final y la dirección del dibujo del arco. El elemento lienzo y arc()
el método es Apoyado por Internet Explorer 9, Firefox, Opera, Chrome y Safari. En este primer ejemplo, dibujaremos un círculo.
En los casos en que necesite dibujar un semicírculo o un arco personalizado, puede usar el mismo método. Un arco es simplemente un sección de la circunferencia de un círculo. Entonces, podemos definir este arco por un punto de partida (x
, y
), radio y puntos inicial y final en el perímetro del círculo.
Finalmente, pasamos un parámetro opcional en el arc()
método para indicar el camino entre los puntos finales. El valor predeterminado para este parámetro es false
que es el equivalente a “en el sentido de las agujas del reloj”.
Sintaxis
context.arc(x,y,radius,startAngle,endEngle,counterclockwise);
Parámetro | Descripción |
---|---|
x |
La coordenada X del círculo. |
y |
la coordenada Y del círculo. |
radius |
El radio del círculo. |
startAngle |
El ángulo inicial en radianes. |
endAngle |
El ángulo final en radianes. |
counterClockwise |
Parámetro opcional. El valor predeterminado es false . |
Ejemplo
<canvas id="myCanvas" width="400" height="200">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(200, 100, 50, 0, 2 * Math.PI);
context.stroke();
</script>
Podemos usar algunas de las otras propiedades y métodos para modificar otras propiedades de esta forma También podemos ajustar los parámetros del arc()
Método para hacer un semicírculo.
Además, deberías nota que el closePath()
se incluye el método para que el semicírculo se convierta en una forma cerrada.
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(200, 150, 100, 1 * Math.PI, 2 * Math.PI);
context.closePath();
context.fillStyle="#FFAA00";
context.fill();
context.lineWidth = 6;
context.strokeStyle="#7F7F7F";
context.stroke();
</script>