Lienzo HTML5: círculos y arcos

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 falseque es el equivalente a “en el sentido de las agujas del reloj”.

Sintaxis

context.arc(x,y,radius,startAngle,endEngle,counterclockwise);

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>