Elemento Canvas de HTML5

Vamos a ver en una serie de “mini-posts” (éste el primero) el elemento Canvas de HTML5. Comenzamos diciendo que es una especie de área de dibujo o lienzo de trabajo para hacer en pantalla todo lo que se nos ocurra, en el interior de dicho elemento, todos los pixels pueden ser controlados individualmente.

También es un contenedor de sccripts, y por lo tanto, aunque el elemento va a estar declarado en el lugar deseado de la página mediante la etiqueta <canvas></canvas>, hay que desarrollar el script que lo define en el apartado <head> de nuestro site. Vamos a ver un ejemplo de colocación del elemento canvas en la página web:

<html>

<head>
	<title></title>
	<script>
	    [...]
	</script>
</head>

<body>
	<canvas>
            [...]
        </canvas>
</body>

</html>

A día de hoy, solamente es soportado por los navegadores Chrome, Firefox y Opera, pero éste elemento nos permite mostrar en los navegadores que por cualquier motivo no lo interpreten el contenido que hay dentro de la etiqueta . Por lo que vamos a ir completando el código fuente con el que hemos empezado explicandole al lector del navegador que no lo soporte lo que ocurre:

<html>

<head>
	<title></title>
	<script>
	[...]
	</script>
</head>

<body>
	<canvas>
            <p>Ésta página contiene un elemento canvas que no es soportado por tu navegador. Prueba a abrir la página con alguno de estos navegadores:</p>
            <ul>
	        <li>Google Chrome</li>
	        <li>Mozilla Firefox</li>
	        <li>Opera</li>
            </ul>
        </canvas>
</body>

</html>

Como he dicho antes, la explicación de este elemento se va a realizar mediante una serie de post de tamaño similar a éste, y en cada post vamos a ir viendo diferentes métodos y propiedades poco a poco, con ejemplos prácticos de su uso.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: