Ingeniería Systems: El elemento de diseño Canvas

Rayas, bordes, texto, degradado, transformaciones y manipulación de objetos con JavaScript, CSS y HTML

Trazar rayas

Para trazar rayas debemos usar el método moveTo(x,y) que determina el punto de partida del trazado. Luego, cada segmento siguiente utilizará el método lineTo(x,y).

A continuación podrá usar las propiedades lineWidth y strokeStyle para determinar el grosor y el color de la línea trazada.

Termine de trazar la línea con el método stroke().

Veamos un ejemplo:

var miCanvas=document.getElementById("trazos");

var miDibujo=miCanvas.getContext("2d");

miDibujo.moveTo(50, 100);

miDibujo.lineTo(200, 20);

miDibujo.lineTo(250, 140);

miDibujo.lineWidth=3;

miDibujo.strokeStyle="darkgreen";

miDibujo.stroke();

</script>

Y el resultado visual:

En las técnicas de dibujo, stroke indica el borde y fill el relleno.

Trazar bordes

La propiedad strokeStyle permite definir el color del borde. El método strokeRect() permite dibujar el borde de un rectángulo y el método stroke() permite dibujar un borde (para un círculo, en el ejemplo siguiente).

var miCanvas=document.getElementById("contorno");

var miDibujo=miCanvas.getContext("2d");

miDibujo.strokeStyle="#306";

miDibujo.strokeRect(10,10,200,100);

miDibujo.arc(220,90,40,0,2*Math.PI,true);

miDibujo.stroke();

</script>

Y el resultado visual obtenido:

Añadir texto

Puede insertar texto en el canvas con el método fillText(), para crear un texto de relleno, y strokeText(), para crear el borde del texto.

La propiedad textBaseline permite definir la línea de base que prefiramos.
La propiedad textAlign permite definir la alineación del texto.
La propiedad font permite definir la tipografía de caracteres que queramos utilizar.

Este es el código de ejemplo:

<!DOCTYPE HTML>

<head>

<title>Texto con <canvas></title>

<style>

#texto {

border: solid 1px #000;

}

</style>

</head>

<body>

var miCanvas=document.getElementById("texto");

var miTexto=miCanvas.getContext("2d");

miTexto.textBaseline="alphabetic";

miTexto.textAlign="center";

miTexto.font="3em Nueva";

miTexto.fillStyle="darkblue";

miTexto.fillText("Canvas",150,80);

</script>

</body>

</html>

Y la visualización:

Aplicar un degradado

Puede aplicar degradados lineales o radiales a sus objetos de dibujo.

En primer lugar, deberá crear un objeto degradado lineal (en este caso llamado dgdl) en su objeto de dibujo. Los parámetros de este objeto serán las coordenadas de inicio y de fin del degradado. En el siguiente ejemplo, las coordenadas del degradado lineal se han calculado respecto al rectángulo dibujado, para que sea vertical:

var dgdl = miDibujo.createLinearGradient(10, 85, 200, 85);

A continuación le aplicamos al degradado el método addColorStop() para indicar la posición de inicio del primer color, según una escala que va de 0 (inicio del degradado) a 1 (fin del degradado), así como el color que se usará al inicio. dgdl.addColorStop(0, "lightblue");. En el ejemplo, el primer color comienza al principio del degradado (0) y se trata de un azul claro (lightblue). Haremos lo mismo con el color del medio (0.5) y el del final (1).

Este es el código:

var miCanvas=document.getElementById("rectangulo");

var miDibujo=miCanvas.getContext("2d");

var dgdl = miDibujo.createLinearGradient(10, 85, 200, 85);

dgdl.addColorStop(0, "lightblue");

dgdl.addColorStop(0.5, "#fff");

dgdl.addColorStop(1, "darkblue");

miDibujo.fillStyle=dgdl;

miDibujo.rect(10,10,200,100);

miDibujo.fill();

</script>

Y el resultado obtenido:

Las transformaciones

El elemento canvas permite "transformar" los objetos dibujados con los métodos translate() (para desplazar un objeto), rotate(radius) (para aplicar una rotación a un objeto), y scale() (para redimensionar un objeto).

La manipulación de objetos

Usted puede proponer interactividad a sus usuarios con sus objetos dibujados, podría llegar incluso a crear juegos. Pero ahí nos estaríamos alejando de nuestro ámbito de aplicación, el diseño web, y nos estaríamos introduciendo en el mundo de los programadores puros en JavaScript. ¡Y eso es otra historia!

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

Regresar al índice

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

Regresar al índice

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:

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

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:

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>

<head>

<title>Título de la página</title>

<style>

#rectangulo {

border: solid 1px #000;

}

</style>

</head>

<body>

<p>Un simple rectángulo:</p>

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:

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!

Regresar al índice

La creación de imágenes bitmap con JavaScript

Regresar al índice

HTML5 introduce un nuevo elemento para el diseño en formato bitmap, se trata del elemento canvas. Este elemento permite definir una zona de visualización en la que usted podrá "dibujar", crear animaciones y desarrollar aplicaciones interactivas. En cierta medida, esto va a permitir que los programadores web ya no tengan que usar la tecnología Adobe Flash. Ya no será necesario ningún plugin.

La utilización del elemento canvas se dirige, sobre todo, a los programadores que usen JavaScript. En efecto, todo lo que usted podrá crear en el elemento canvas se hará con JavaScript. Este libro está orientado al diseño web, y no a la programación en JavaScript, así que solamente vamos a ver los elementos básicos.

Último aviso: debe saber que todo lo que haya sido creado con programación, será siempre más ligero que si se hubiera hecho en diseño "puro" y exportado a los formatos .png, .jpg o .gif. Además, una de las funcionalidades principales de canvas es que ¡el usuario podrá modificar su contenido!

Las técnicas propuestas

Con JavaScript, usted tiene a disposición todo un arsenal de herramientas y de técnicas:

herramientas de diseño: óvalos, rectángulos, líneas, arcos, curvas de Bézier...
efectos: bordes, espaciados, degradados, transparencias, sombras...
transformaciones: rotación, desplazamiento, zoom...
gestión de la tipografía: incorporación de fuentes tipográficas...
gestión de las imágenes: importación y exportación.

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

Regresar al índice

Ingeniería Systems

Páginas

domingo, 15 de junio de 2014

Rayas, bordes, texto, degradado, transformaciones y manipulación de objetos con JavaScript, CSS y HTML

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

La creación de imágenes bitmap con JavaScript

Páginas vistas en total según Google