tutorial html5 en español

Tutorial HTML5 en Español: Ejemplos Prácticos de HTML5 Canvas

El lenguaje HTML es de gran importancia para el desarrollo web, recientemente salio la nueva versión de este importante lenguaje el cual con sus nuevos elementos promete revolucionar lo que hasta hace un tiempo conocíamos de la web y extender aun mas sus posibilidades y funcionalidades, es por esto que les traigo hoy este excelente tutorial del uso de canvas que tiene HTML5 y que harán de sus paginas un mundo nuevo, Espero que les sea de utilidad.HTML5: Elemento CanvasEl elemento de HTML <canvas> permite la creación de gráficos, diagramas, juegos y otros elementos visuales. También permite renderizar en 2D y 3D figuras e imágenes, vía JavaScript.Canvas es quizás la parte más visible del set de características de HTML5 con nuevos demos, proyectos, etc.

Soporte de los Navegadores y Aceleración por HardwareCanvas es soportado a partir de FireFox 1.5, Opera 9, las nuevas versiones de Safari, Chrome e Internet Explorer 9. La aceleración por hardware es soportada con algunas variaciones por todos los navegadores.

Que puede hacer Canvas y que NoLa especificación advierte de no usar Canvas para renderizar contenido estático. Hay varias razones para no usar Canvas si una imagen o un elemento de texto tradicional son suficientes. Si el scripting está deshabilitado del lado del cliente, Canvas será inútil. El texto dibujado en Canvasno puede ser seleccionado, buscado, o rastreado por las arañas de la web. Por esa misma razón,Canvas hace más difícil la accesibilidad. Por ejemplo, si buscamos redondear los bordes de un área de texto seguramente conviene utilizar CSS3 antes que Canvas.

La Performance de CanvasCanvas puede ser muy rápido, pero está en manos del programador que esto se cumpla. Muchas de las optimizaciones que deben ser tenidas en cuenta y llevadas adelante quedan también en responsabilidad del programador. La velocidad juega un papel importante, y cualquier desarrollador de Canvas serio debe familiarizarse con los conceptos básicos de performance de gráficos como invalidations y viewports.

Ejemplo Práctico: Creando un CanvasEl elemento <canvas> es similar a los tags <div>, <a> o <table>, con la excepción de que su contenido son renderizados con JavaScript. Para implementarlo, necesitamos escribir el tag <canvas> en algún

http://www.haciendoweb.cult.cu/wp-content/uploads/2012/12/1544.gif

lugar del código HTML y crear una función de JavaScript que acceda a dicho tag una vez que la página carga y luego utilizar las APIs de Canvas de HTML5 para que se puedan visualizar nuestros dibujos.

1 <body>

2 <canvas id="myCanvas"></canvas>3 </body>HTML5 Canvas Template1 <!DOCTYPE HTML>

2 <head>

3 <script>

4 window.onload = function() {5 var canvas = document.getElementById("myCanvas");

6 var context = canvas.getContext("2d");

7

8 // sigue el código

9

10 };

11

12 </script>13 </head>

14 <body>

15 <canvas id="myCanvas" width="578" height="200"></canvas>

16 </body>

17 </html>El código superior puede ser tomado como base de todos nuestros futuros proyectos de Canvas. Podemos definir el ancho y alto utilizando las propiedades width y height. En la función inicializadora podemos acceder al objeto canvas DOM através del id y obtener el contexto 2-d utilizando getContext(). LíneasEl método beginPath() define un nuevo path de dibujo. El método moveTo() podemos pensarlo como una forma de posicionar el cursor de dibujo. El método lineTo() dibuja una línea entre los puntos dados. El método stroke() asigna color a la línea y la hace visible. El color por default es negro.

1 <script>

2 context.beginPath();3 context.moveTo(x,y);4 context.lineTo(x,y);5 context.stroke();

6 </script>

1 <!DOCTYPE HTML>

2 <head>

3 <style>

4

5 body {

6 margin: 0px;7 padding: 0px;

8 }

9

10 #myCanvas {11 border: 1px solid #9C9898;

12 }

13

14 </style>15 <script>

16

17 window.onload = function() {

18 var canvas = document.getElementById("myCanvas");19 var context = canvas.getContext("2d");

20 context.beginPath();

21 context.moveTo(100, 150);

22 context.lineTo(450, 50);

23 context.stroke();

24 };

25


28 <body>


30 </body>

31 </html>

Otros atributos:

lineWidth = ancho de la línea.strokeStyle = color de la línea.

Paths y CurvasPara crear un path con HTML5 Canvas, podemos conectar multiples subpaths. El punto final de cada subpath será el nuevo punto de contexto. Podemos usar los métodos lineTo(), arcTo(), quadraticCurveTo() y bezierCurveTo() para construir cada subpath. Podemos usar el métodobeginPath() cada vez que deseemos crear un nuevo path.1 <!DOCTYPE HTML>

2 <head>

3 <style>

4

5 body {


8 }

9


12 }

13 </style>

14

15 <script>




20 context.moveTo(100, 20);

21

22 // linea 123 context.lineTo(200, 160);

24

25 // curva cuadratica

26 context.quadraticCurveTo(230, 200, 250, 120);

27

28 // curva bezier29 context.bezierCurveTo(290, -40, 300, 200, 400, 150);

30

31 // linea 2

32 context.lineTo(500, 90);

33 context.lineWidth = 5;

34 context.strokeStyle = "blue";35 context.stroke();

36 };

37 </script>

38 </head>

39 <body>

40 <canvas id="myCanvas" width="578" height="200"></canvas>41 </body>42 </html>FormasPara crear una forma customizada con HTML5 Canvas, podemos crear un path y luego cerrarlo utilizando el método closePath(). Podemos usar los métodos lineTo(), arcTo(), quadraticTo() o bezierCurveTo() para construir cada subpath que necesitemos.Con la propiedad fillStyle podemos setear el color de la forma.

1 <script>

2 context.closePath();3 </script>

1

1

1 <!DOCTYPE HTML>

2 <head>

3 <style>

4 body {


7 }

8


11 }

12 </style>

13

14 <script>



18

19 // comienza la figura customizada


21 context.moveTo(170, 80);22 context.bezierCurveTo(130, 100, 130, 150, 230, 150);23 context.bezierCurveTo(250, 180, 320, 180, 340, 150);24 context.bezierCurveTo(420, 150, 420, 120, 390, 100);

25 context.bezierCurveTo(430, 40, 370, 30, 340, 50);

26 context.bezierCurveTo(320, 5, 250, 20, 250, 50);27 context.bezierCurveTo(200, 5, 150, 20, 170, 80);

28

29 // se completa la figura customizada

30 context.closePath();

31 context.fillStyle = "#8ED6FF";

32 context.fill();


34 context.strokeStyle = "blue";


36 };


39 <body>


41 </body>

42 </html>

RectángulosPara crear rectángulos podemos usar el método rect(). A este lo podemos posicionar con los parámetros x e y, y podemos setear su ancho y alto con width y height respectivamente. La posición es relativa al borde superior izquierdo del rectángulo.1 <!DOCTYPE HTML>

2 <head>

3 <style>


6 }

7

8 body {

9 margin: 0px;

10 padding: 0px;

11 }

12 </style>

13

14 <script>


16 var canvas = document.getElementById('myCanvas');17 var context = canvas.getContext('2d');

18


20 context.rect(188, 50, 200, 100);21 context.fillStyle = '#8ED6FF';

22 context.fill();


24 context.strokeStyle = 'black';25 context.stroke();

26 };

27 </script>

28 </head>

29 <body>

30 <canvas id="myCanvas" width="578" height="200"></canvas>31 </body>32 </html>CírculoPara dibujar un círculo en HTML5 Canvas podemos crear un arco usando el método arc() y definir como ángulo de comienzo 0 y el ángulo final como 2 * PI.

1 <script>

2 context.arc(x, y, radius, 0 , 2 * Math.PI, false);3 </script>

1

1

1 <!DOCTYPE HTML>

2 <head>

3 <style>

4

5 body {

6 margin: 0px;

7 padding: 0px;8 }

9

10 #myCanvas {

11 border: 1px solid #9C9898;

12 }

13 </style>

14

15 <script>


17 var canvas = document.getElementById("myCanvas");18 var context = canvas.getContext("2d");

19 var centerX = canvas.width / 2;

20 var centerY = canvas.height / 2;

21 var radius = 70;

22

23 context.beginPath();24 context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

25 context.fillStyle = "#8ED6FF";

26 context.fill();

27 context.lineWidth = 5;28 context.strokeStyle = "black";


30 };

31

32 </script>

33 </head>

34 <body>

35 <canvas id="myCanvas" width="578" height="200"></canvas>36 </body>37 </html>ImágenesPara dibujar una imagen usando HTML5 Canvas, podemos usar el método drawImage() que requiere un objeto imagen y un punto de destino. Este último es relativo al borde izquierdo superior de la imagen.

1 <script>

2 context.drawImage(imageObj, x, y);

3 </script>

1 <!DOCTYPE HTML>

2 <head>

3 <style>

4 body {


7 }

8 #myCanvas {

9 border: 1px solid #9C9898;

10 }

11 </style>

12 <script>



16 var imageObj = new Image();

17

18 imageObj.onload = function() {

19 context.drawImage(imageObj, 69, 50);

20 };

21 imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";22 };

23

24 </script>

25 </head>

26 <body>

27 <canvas id="myCanvas" width="578" height="400"></canvas>28 </body>29 </html>Texto: Fuentes, Tamaños y Estilos

Para setear la fuente, el tamaño y el estilo de un texto en HTML5 Canvas, podemos usar la propiedad font del contexto de canvas. El estilo puede ser normal, negrita o cursiva. Por default, el estilo es normal.

1 <script>

2 context.font = 'italic 40px Calibri';

3 </script>

1 <!DOCTYPE HTML>2 <html>3 <head>4 <style>

5 body {

6 margin: 0px;

7 padding: 0px;

8 }


11 }

12 </style>

13

14 <script>



18 var x = 80;

19 var y = 110;

20

21 context.font = "60pt Calibri";22 context.lineWidth = 3;

23 // stroke color

24 context.strokeStyle = "blue";

25 context.strokeText("Hola Mundo!", x, y);26 };

27

28 </script>

29 </head>

30 <body>

31 <canvas id="myCanvas" width="578" height="200"></canvas>32 </body>33 </html>Hasta aquí este tutorial de HTML5 pronto publicaremos mas tutoriales sobre este tema.

Descargar Ejemplos:

tutorial html5 en español

Documents