Introducción de canvas y de svg html5

Introducción de Canvas en
HTML5
CANVAS ES UNO DE LOS COMPONENTES MÁS
NOVEDOSOS DE ESTÁNDAR HTML 5 QUE
SIRVE PARA DIBUJAR DINÁMICAMENTE
IMÁGENES EN UNA PÁGINA WEB.

Novedades de HTML5
 HTML 5 viene con varias novedades interesantes y una de las que
podemos empezar a probar ya es el Canvas. Canvas significa en español
algo así como lienzo y es básicamente eso, un área donde podemos
dibujar como si fuera un lienzo.
 El elemento canvas permite especificar un área de la página donde se
puede, a través de scripts, dibujar y rende rizar imágenes, lo que amplía
notablemente las posibilidades de las páginas dinámicas y permite
hacer cosas que hasta ahora estaban reservadas a los desarrolladores en
Flash, con la ventaja que para usar canvas no será necesario ningún
plugin en el navegador, lo que mejorará la disponibilidad de esta nueva
aplicación.

Compatibilidad de Canvas
 El canvas se desarrolló inicialmente por Apple para su navegador Safari
y luego fue utilizado y estandarizado por la organización WHATWG
para incorporarlo a HTML 5. Posteriormente también ha sido adoptado
por navegadores como Firefox y Opera. Por lo que respecta a Chrome,
es un navegador que utiliza el mismo motor de rende rizado que Safari,
por lo que también soporta el elemento Canvas.
 De entre los navegadores más habituales sólo nos queda por soportar
canvas el siempre polémico Internet Explorer. La última versión del
navegador en el momento de escribir este artículo, Internet Explorer 8,
no soporta canvas con funciones nativas, pero existen diversos
proyectos y plugins que pueden ampliar las funcionalidades del
navegador para dar soporte a este nuevo elemento del HTML 5. Por
ejemplo, existe el proyecto Explorer Canvas en el que se ha preparado
un plugin para que Explorer soporte el dibujo 2d que permite canvas.

 Sin embargo, aunque en diversos frentes se ha comenzado a utilizar
Canvas, la falta de soporte de Explorer hace que todavía no sea muy
recomendable su incorporación a las aplicaciones web, ya que la
mayoría de los usuarios, que utilizan Explorer, no podrían ver las
partes de la página donde se utiliza canvas. Esta situación se espera que
cambie durante los próximos meses o años, puesto que la incorporación
de canvas al HTML 5 ya es una realidad e Internet Explorer más tarde o
temprano tendrá que dar soporte esta utilidad en su navegador, si no
quiere que se descarte su utilización por parte de los usuarios que
deseen acceder a los servicios web más avanzados.

Polémica por la propiedad intelectual de
Canvas
 Uno de los problemas de canvas es que se creó bajo
propiedad intelectual de Apple, es decir que dicha empresa
era la creadora de la ingeniería que daba soporte a este
nuevo elemento y por tanto se encontraba bajo patentes de
la compañía. Este hecho, añadido a la existencia de un
formato abierto que sirve para hacer cosas similares como
es el SVG, hizo que surgiera una polémica sobre la
aceptación de este elemento en el nuevo estándar del
HTML 5.

Aplicaciones de uso de Canvas
 Canvas permite dibujar en la página y actualizar dinámicamente estos
dibujos, por medio de scripts y atendiendo a las acciones del usuario.
Todo esto da unas posibilidades de uso tan grandes como las que
disponemos con el plugin de Flash, en lo que respecta a renderización
de contenidos dinámicos. Las aplicaciones pueden ser grandes como
podamos imaginar, desde juegos, efectos dinámicos en interfaces de
usuario, editores de código, editores gráficos, aplicaciones, efectos 3D,
etc.
 Actualmente algunas de las aplicaciones más novedosas para para la
web utilizan ya canvas para su funcionamiento, donde se puede
destacar Bespin, un editor de código de Mozilla, o Google Wave. En la
entrada de la Wiki sobre Canvas podemos encontrar diversos enlaces a
sitios web con ejemplos de uso de este elemento del HTML 5.

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:5px solid blue;">
</canvas>
</body>
</html>
Ejemplo de un
rectángulo realizado
con Canvas

<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:5px solid red;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Ejemplo de un
circulo realizado
con Canvas.

Introducción a SVG en HTML5
SVG SIGNIFICA VECTORES GRÁFICOS
ESCALABLES. DICHO ASÍ TAL VEZ NO LO
ENTENDAMOS, PERO LO ENTENDEREMOS
MEJOR SI DECIMOS QUE ES UNA APLICACIÓN
PARA HACER DIBUJOS, BANNERS, GRÁFICOS,
ETC. TANTO ESTÁTICOS COMO ANIMADOS.

Diferencias entre Canvas y SVG
 Con SGV podemos hacer las mismas cosas que con canvas, sin embargo
su forma de trabajar es diferente.
 Mientras que con canvas los dibujos se crean mediante píxeles. Con
SVG se crean mediante gráficos vectoriales. Esto significa que el dibujo
se adapta al tamaño, de forma que al ampliarlo o reducirlo en la
pantalla se muestra siempre uniforme y no muestra los contornos de
los píxeles para ampliaciones muy grandes. Esto en pantalla tal vez no
tenga mucha importancia, pero si queremos imprimirlo en un tamaño
grande los dibujos hechos con SVG muestran un mejor acabado.

Sus principales características
 SVG es fácil de usar, ya que se basa en el lenguaje XML, es decir el mismo lenguaje de
etiquetas que usa HTML. Esto significa que no tenemos que usar java script ni otro
lenguaje diferente del HTML para incorporar figuras SVG en la página, ya que el XML es
el mismo lenguaje de base que utilizan tanto HTML como SVG. Podemos por tanto crear
las figuras y dibujos con SVG mediante etiquetas que incorporamos al lenguaje HTML.
 Al estar el código SVG formado por los mismos elementos que el HTML podemos
también aplicarle los lenguajes CSS y java script.
 Con CSS podemos indicar el estilo de los distintos elementos. Para ello disponemos
además de las propiedades habituales de CSS de algunas propiedades especiales para
estos elementos que veremos más adelante.
 Con java script podemos dar movimiento a los elementos creados con SVG y realizar otra
serie de efectos (aparición, desaparición, agrandar, etc.). También podemos realizar estos
efectos mediante CSS3. Sin embargo también podemos crear animaciones mediante el
código SVG, sin necesidad de utilizar java script ni CSS3, Veremos todo esto más adelante
en este manual.

Compatibilidad con navegadores.
 SVG es compatible con todos los navegadores en sus
versiones modernas, si bien en Internet Explorer
sólo es compatible con las versiones 9 en adelante.
Para versiones anteriores es necesario usar un
plugin.

Introducir código
SVG en la página
Para introducir un elemento SVG en la página podemos utilizar la etiqueta <svg> ...
</svg>. Este es el elemento contenedor dentro del cual dibujaremos los demás
elementos. Debemos indicar mediante los atributos witdh y height la anchura y la
altura del elemento contenedor, o podemos indicarlo también mediante código
CSS. En todo caso hay que dar siempre una altura y anchura este elemento.
También podemos poner el elemento SVG en un archivo aparte, para después
incorporarlo a la página en el sitio que queramos. Para ello creamos un nuevo
archivo en el que incorporamos el código SVG.
El código va encerrado dentro de la etiqueta "svg". Al ser éste un lenguaje XML es
conveniente poner en la etiqueta los atributos de este lenguaje. Después
pondremos el código en SVG y al final cerramos la etiqueta SVG. Todo ello lo
guardaremos en un archivo aparte con la extensión .svg, por ejemplo circulo.svg.
Para incluir después este archivo en la página podemos hacerlo de varias maneras:
 Como imagen: incluyéndolo dentro del atributo src:
<img src="circulo.sgv" alt="circulo" width="200" height="200">
 Como iframe: incluyéndolo dentro del atributo src:
<iframe src="circulo.svg" width="200" height="200"></iframe>
 Con la etiqueta embed; atributos src, width y height:
<embed src="circulo.svg" height="200" width="200" />
 Con la etiqueta object; atributos data width y height:
<object data="circulo.svg" width="200" height="200"></object>
En cualquier caso debemos incluir la ruta del archivo, y la altura y anchura de la
ventana donde veremos el SVG (atributos "height" y "width").

<!DOCTYPE html>
<html>
<body>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150“ height="150“
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
Ejemplo de
un cuadrado
realizado con
SVG.

<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Ejemplo de
un circulo
realizado con
SVG.

Introducción de canvas y de svg html5

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (6)

Similar a Introducción de canvas y de svg html5

Similar a Introducción de canvas y de svg html5 (20)

Último

Último (20)

Introducción de canvas y de svg html5