Para dibujar líneas disponemos de una serie de
métodos que debemos llamar en un orden predeterminado.
El algoritmo para dibujar dos líneas que formen
una letra "V" es:
<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function retornarLienzo(x)
{
var canvas = document.getElementById(x);
if (canvas.getContext)
{
var lienzo = canvas.getContext("2d");
return lienzo;
}
else
return false;
}
function dibujar()
{
var lienzo=retornarLienzo("lienzo1");
if (lienzo)
{
lienzo.strokeStyle = "rgb(200,0,0)";
//Inicio de camino
lienzo.beginPath();
lienzo.moveTo(0,0);
lienzo.lineTo(150,300);
lienzo.lineTo(300,0);
//Trazar linea
lienzo.stroke();
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
lienzo.strokeStyle = "rgb(200,0,0)";
Llamamos al método beginPath para indicar que comenzamos a dibujar la/s línea/s:
lienzo.beginPath();
Movemos el puntero gráfico a la coordenada donde comenzará a dibujarse llamando al método moveTo:
lienzo.moveTo(0,0);
A través del método lineTo trazamos una línea desde donde se encuentra el puntero gráfico hasta la coordenada indicada mediante parámetros:
lienzo.lineTo(150,300);
Trazamos una segunda línea desde donde finalizó la anterior hasta la nueva coordenada:
lienzo.lineTo(300,0);
Para que se hagan efectivas todas la líneas trazadas hasta el momento debemos llamar al método stroke:
lienzo.stroke();
El puntero gráfico se desplaza cada vez que llamamos al método lineTo.
PROBLEMA PROPUESTO:
Dibujar una cuadrícula formada por 10 líneas horizontales y
10 líneas verticales.
No hay comentarios:
Publicar un comentario