Lienzo HTML5: círculos y arcos

¿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 falseque 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>

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

Deja un comentario