Dibujar curvas en un canvas puede ser sencillo o complejo, todo depende de lo que se quiera lograr, se pueden hacer algunos efectos interesantes, lo que podríamos utilizar para construir algunas funcionalidades en nuestra página, que resalten del resto de las páginas hechas en HTML5.
Una de las cosas que podemos hacer es darle un manejo avanzado a la creación de las líneas curvas, con este tipo de herramientas estaremos más cerca de no tener limitaciones a la hora de pensar en lo que nuestra página puede hacer.
Dibujar una curva al mover el mouse
Este caso es bastante interesante ya que lo que hacemos es dibujar una curva al momento de mover el mouse, adicionalmente si presionamos alguna tecla en nuestro teclado algunos puntos de la curva cambian.
Por ejemplo, si pulsamos la tecla ctrl se moverá el primer punto que representa el final del sub-path, si presionamos la tecla shift se moverá el segundo punto que son los primeros dos argumentos del método arcTo() y por último en caso que no presionemos ninguna tecla se moverá el tercer punto que está representado por los últimos dos argumentos del método.
Veamos a continuación el código con el que logramos dichos efectos:
Como vemos, primero en el código definimos el manejador de la recepción de eventos de las teclas que presionamos, en ella establecemos los valores que se deben tomar.
Veamos a continuación una captura de pantalla de cómo podría resultar esto en nuestro navegador, es importante mencionar que al ser dinámico los resultados pueden variar al reproducir este ejemplo:
Utilizando el método Arc
Anteriormente, solo habíamos utilizado el método arcTo(), ahora veremos cómo funciona el método arc() su manejo es más sencillo, ya que especificamos un punto en el canvas a través de los dos primeros argumentos y luego el radio y el ángulo de la curva.
Veamos el siguiente ejemplo de cómo dibujar tres tipos de curvas con este método:
Veamos ahora como luce esto en nuestro navegador:
Como vemos el primer y segundo ejemplo son círculos, uno completo y el otro con una pequeña abertura, en cambio el tercer círculo es totalmente irregular y nos muestra la versatilidad del método arc().
Una de las cosas que podemos hacer es darle un manejo avanzado a la creación de las líneas curvas, con este tipo de herramientas estaremos más cerca de no tener limitaciones a la hora de pensar en lo que nuestra página puede hacer.
Dibujar una curva al mover el mouse
Este caso es bastante interesante ya que lo que hacemos es dibujar una curva al momento de mover el mouse, adicionalmente si presionamos alguna tecla en nuestro teclado algunos puntos de la curva cambian.
Por ejemplo, si pulsamos la tecla ctrl se moverá el primer punto que representa el final del sub-path, si presionamos la tecla shift se moverá el segundo punto que son los primeros dos argumentos del método arcTo() y por último en caso que no presionemos ninguna tecla se moverá el tercer punto que está representado por los últimos dos argumentos del método.
Veamos a continuación el código con el que logramos dichos efectos:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo</title>
<style>
canvas {border: thin solid black}
body > * {float:left;}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Su navegador no es compatible con el elemento <code>canvas</code>
</canvas>
<script>
var canvasElem = document.getElementById("canvas");
var ctx = canvasElem.getContext("2d");
var point1 = [100, 10];
var point2 = [200, 10];
var point3 = [200, 110];
draw();
canvasElem.onmousemove = function (e) {
if (e.ctrlKey) {
point1 = [e.clientX, e.clientY];
} else if(e.shiftKey) {
point2 = [e.clientX, e.clientY];
} else {
point3 = [e.clientX, e.clientY];
}
ctx.clearRect(0, 0, 540, 140);
draw();
}
function draw() {
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], 50);
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>
Como vemos, primero en el código definimos el manejador de la recepción de eventos de las teclas que presionamos, en ella establecemos los valores que se deben tomar.
Veamos a continuación una captura de pantalla de cómo podría resultar esto en nuestro navegador, es importante mencionar que al ser dinámico los resultados pueden variar al reproducir este ejemplo:
Utilizando el método Arc
Anteriormente, solo habíamos utilizado el método arcTo(), ahora veremos cómo funciona el método arc() su manejo es más sencillo, ya que especificamos un punto en el canvas a través de los dos primeros argumentos y luego el radio y el ángulo de la curva.
Veamos el siguiente ejemplo de cómo dibujar tres tipos de curvas con este método:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo</title>
<style>
canvas {border: thin solid black}
body > * {float:left;}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Su navegador no es compatible con el elemento <code>canvas</code>
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "yellow";
ctx.lineWidth = "3";
ctx.beginPath();
ctx.arc(70, 70, 60, 0, Math.PI * 2, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 70, 60, Math.PI/2, Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
var val = 0;
for (var i = 0; i < 4; i++) {
ctx.arc(350, 70, 60, val, val + Math.PI/4, false);
val+= Math.PI/2;
}
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
Veamos ahora como luce esto en nuestro navegador:
Como vemos el primer y segundo ejemplo son círculos, uno completo y el otro con una pequeña abertura, en cambio el tercer círculo es totalmente irregular y nos muestra la versatilidad del método arc().
