Básicamente todas las figuras están hechas de líneas y curvas, en muchos casos podemos simular las curvas utilizando líneas muy cortas y en gran cantidad, sin embargo esto es muy complejo y conlleva un trabajo excepcional, HTML5 y su practicidad nos ofrecen el método Arc con lo que podemos desarrollar líneas curvas y de alguna forma poder complementar nuestros dibujos.
Método Arc
Como mencionamos al inicio, este método nos permite generar líneas curvas dentro del elemento canvas sin mayor complejidad, sin necesidad de introducir complejas fórmulas matemáticas como tal vez deba realizarse en algunos lenguajes de programación.
Antes de ver cómo funciona este método debemos conocer sus características y propiedades, estas las veremos a continuación en la siguiente lista:
Como vemos tenemos dos métodos básicos que nos permiten todo lo necesario para poder dibujar las líneas curvas en nuestro elemento canvas, ahora veamos un poco de código para que demostremos como poner en práctica esto que acabamos de ver:
La línea curva del ejemplo la hemos hecho utilizando el método arcTo() que habíamos descrito anteriormente, para dibujar esta curva dependemos de dos líneas, la primera es dibujada a partir del extremos final del último sub-path al punto descrito por los primeros dos argumentos del método y la segunda línea es dibujada del punto descrito por los primeros dos argumentos hasta el punto descrito por el tercer y cuarto argumento.
Finalmente la curva es dibujada como la línea más corta entre el último sub-path y el segundo punto que describe una curva de un circulo con el radio especificado por el último argumento, para que veamos a que nos referimos, el código incorpora unas líneas de referencia en color rojo. Veamos a continuación una imagen de cómo queda esto en nuestro navegador:
Una vez demostrado el funcionamiento de Arc para dibujar líneas curvas, podemos dar por finalizado este tutorial, ya poseemos una nueva herramienta que nos permitirá extraer más del elemento canvas y por ende extender mucho más su funcionalidad.
Método Arc
Como mencionamos al inicio, este método nos permite generar líneas curvas dentro del elemento canvas sin mayor complejidad, sin necesidad de introducir complejas fórmulas matemáticas como tal vez deba realizarse en algunos lenguajes de programación.
Antes de ver cómo funciona este método debemos conocer sus características y propiedades, estas las veremos a continuación en la siguiente lista:
- arc(x, y, rad, anguloInicial, anguloFinal, dirección): Este método dibuja una curva en las coordenadas (x, y) con un radio rad, el ángulo inicial es anguloInicial y el final del ángulo es anguloFinal. Tenemos un parámetro opcional que es dirección y especifica la dirección que tomará la curva dibujada por el método.
- arcTo(x1, y1, x2, y2,rad): Este método nos permite dibujar una curva a las coordenadas (x2, y2) que pasan las coordenadas (x1, y1) y posee un radio rad.
Como vemos tenemos dos métodos básicos que nos permiten todo lo necesario para poder dibujar las líneas curvas en nuestro elemento canvas, ahora veamos un poco de código para que demostremos como poner en práctica esto que acabamos de ver:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {border: thin solid black}
body > * {float:left;}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var point1 = [100, 10];
var point2 = [200, 10];
var point3 = [200, 110];
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(point1[0], point1[1]);
ctx.arcTo(point2[0], point2[1], point3[0], point3[1], 100);
ctx.stroke();
drawPoint(point1[0], point1[1]);
drawPoint(point2[0], point2[1]);
drawPoint(point3[0], point3[1]);
ctx.beginPath();
ctx.moveTo(point1[0], point1[1]);
ctx.lineTo(point2[0], point2[1]);
ctx.lineTo(point3[0], point3[1]);
ctx.stroke();
function drawPoint(x, y) {
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(x -2, y-2, 4, 4);
}
</script>
</body>
</html>
La línea curva del ejemplo la hemos hecho utilizando el método arcTo() que habíamos descrito anteriormente, para dibujar esta curva dependemos de dos líneas, la primera es dibujada a partir del extremos final del último sub-path al punto descrito por los primeros dos argumentos del método y la segunda línea es dibujada del punto descrito por los primeros dos argumentos hasta el punto descrito por el tercer y cuarto argumento.
Finalmente la curva es dibujada como la línea más corta entre el último sub-path y el segundo punto que describe una curva de un circulo con el radio especificado por el último argumento, para que veamos a que nos referimos, el código incorpora unas líneas de referencia en color rojo. Veamos a continuación una imagen de cómo queda esto en nuestro navegador:
Una vez demostrado el funcionamiento de Arc para dibujar líneas curvas, podemos dar por finalizado este tutorial, ya poseemos una nueva herramienta que nos permitirá extraer más del elemento canvas y por ende extender mucho más su funcionalidad.
