Índice

Trazar una línea recta

La función lineTo(x,y) permite diseñar líneas rectas. Los argumentos x e y son las coordenadas del extremo final de la recta. El punto de partida depende de los caminos diseñados anteriormente, dado que el último punto de un camino es el punto de partida para el siguiente, etc. El punto de partida puede modificarse con ayuda de la función moveTo.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<canvas id="dibujo" width="200px" height="200px" style="border: 1px 
solid black"> 
Su navegador no soporta la etiqueta canvas. 
</canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("dibujo"); 
var contexto = canvas.getContext("2d"); 
contexto.beginPath(); 
contexto.moveTo(25, 25); 
contexto.lineTo(175, 175); 
contexto.moveTo(175,25); 
contexto.lineTo(25, 175); 
contexto.stroke(); 
</script> 
</body> 
</html>
images/CAP22IMG06.png

Detallemos el código:

contexto.moveTo(25, 25); 
contexto.lineTo(175, 175);

El script posiciona el puntero virtual en su punto de partida (moveTo(25, 25)) y diseña la primera diagonal (lineTo(175, 175)).

contexto.moveTo(175,25); 
contexto.lineTo(25, 175);

A continuación, el puntero se desplaza hasta ...