domingo, 15 de junio de 2014

Dibujar un rectángulo y círculo con JavaScript, HTML y CSS



Dibujar un rectángulo

1. El elemento canvas

Es este elemento <canvas> el que le permitirá definir la zona de dibujo en su página web. Deberá atribuirle un id único y un tamaño:

<canvas id="rectangulo" width="300" height="150"></canvas>

De manera predeterminada, la zona definida no tendrá contorno, así que será invisible. En el <head>, en un elemento <style>, utilice la propiedad CSS border para visualizar su contorno:

#rectangulo {
border: solid 1px #000;
}

Por supuesto, también puede usar las propiedades width y height en el estilo CSS.

Así se visualizará, por el momento, vacío:



2. El rectángulo

Ahora vamos a crear un rectángulo en JavaScript. Inserte el código dentro de un elemento <script>, justo delante de </body>.

<script>
var miCanvas=document.getElementById("rectangulo");
var miDibujo=miCanvas.getContext("2d");
miDibujo.rect(10,10,200,100);
miDibujo.fill();
</script>

La primera línea declara la variable var llamada miCanvas, que define un nuevo objeto de diseño en el elemento canvas del documento en curso, que ha sido identificado a su vez mediante su id exclusivo rectangulo (document.getElementById("rectangulo")).

La segunda línea declara una nueva variable de objeto llamada miDibujo. Este objeto está definido en el elemento miCanvas que acabamos de crear y se usará para crear un gráfico en dos dimensiones (miCanvas.getContext("2d")).

La tercera línea permite utilizar el método rect para definir un rectángulo en el objeto miDibujo. Para definir el rectángulo se utilizan las coordenadas x (horizontal) e y (vertical), 10 píxeles y 10 píxeles, contados a partir del ángulo superior izquierdo del elemento canvas, con un ancho de 200 píxeles y una altura de 100 píxeles (miDibujo.rect(10,10,200,100)).

La cuarta línea solicita que se cree o se muestre el rectángulo definido: miDibujo.fill().

También podríamos haber usado el método fillRect() que permite definir y dibujar el rectángulo al mismo tiempo:

<script>
var miDibujo=document.getElementById("rectangulo").getContext("2d");
miDibujo.fillRect(10,10,200,100);
</script>


3. El código completo y la visualización

Este sería el código completo de la página web:

<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Título de la página</title>
<meta charset="UTF-8" />
<style>
#rectangulo {
border: solid 1px #000;
}
</style>
</head>
<body>
<p>Un simple rectángulo:</p>
<canvas id="rectangulo" width="300" height="150"></canvas>
<script>
var miCanvas=document.getElementById("rectangulo");
var miDibujo=miCanvas.getContext("2d");
miDibujo.rect(10,10,200,100);
miDibujo.fill();
</script>
</body>
</html>

La visualización:



4. Aplicar un color de relleno

Vamos a aplicarle a nuestro objeto de diseño un relleno de color gris claro con el método fillStyle. Podemos indicar el color en hexadecimal, en RGB o de forma nominal:

var miCanvas=document.getElementById("rectangulo");
var miDibujo=miCanvas.getContext("2d");
miDibujo.fillStyle="rgb(210,210,210)";
miDibujo.rect(10,10,200,100);
miDibujo.fill();

Este sería el resultado:



5. Aplicar una sombra

Vamos ahora a aplicarle una sombra a nuestro rectángulo. Para ello, vamos a usar las propiedades: 
  • shadowBlur: para definir el difuminado de la sombra. 
  • shadowColor: para definir el color. 
  • shadowOffsetX: para definir la distancia horizontal (si no se indica nada, la sombra aparecerá alrededor del dibujo).
  • shadowOffsetY: para definir la distancia vertical (si no se indica nada, la sombra aparecerá alrededor del dibujo).

var miCanvas=document.getElementById("rectangulo");
var miDibujo=miCanvas.getContext("2d");
miDibujo.fillStyle="rgb(210,210,210)";
miDibujo.rect(10,10,200,100);
miDibujo.shadowBlur=50;
miDibujo.shadowColor="black";
miDibujo.shadowOffsetX=10;
miDibujo.shadowOffsetY=20;
miDibujo.fill();

Este sería el resultado:



Dibujar un círculo

Para dibujar una forma redonda, utilice el método arc(). Esta es la sintaxis: arc(x,y,radius,startAngle,endAngle,antiClockwise).

Y sus argumentos: 
  • x: coordenada horizontal calculada a partir del centro del óvalo. 
  • y: coordenada vertical calculada a partir del centro del óvalo. 
  • radius: radio del óvalo. 
  • startAngle: punto de partida del arco en radianes. 
  • endAngle: punto de llegada del arco en radianes. 
  • antiClockwise: valor boleano que indica que el arco será dibujado en el sentido de las agujas del reloj (valor true) o al contrario (valor false).


Este es el código:

<script>
var miCanvas=document.getElementById("ovalo");
var miDibujo=miCanvas.getContext("2d");
miDibujo.fillStyle="rgb(210,210,210)";
miDibujo.arc(100,100,80,0,2*Math.PI,true);
miDibujo.fill();
</script>

La visualización:



Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada