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...

Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Agregar color
Siguiente
Diseño de formas geométricas