Tutorial HTML5 en Español

Tutorial HTML5 en Espaol: Ejemplos Prcticos de HTML5 Canvas
El lenguaje HTML es de gran importancia para el desarrollo web,

recientemente salio la nueva versin de este importante lenguaje el cual con sus
nuevos elementos promete revolucionar lo que hasta hace un
tiempo conocamos 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 harn de sus paginas un mundo nuevo, Espero que
les sea de utilidad.
HTML5: Elemento Canvas
El elemento de HTML <canvas> permite la creacin de grficos, diagramas,
juegos y otros elementos visuales. Tambin permite renderizar en 2D y 3D figuras
e imgenes, va JavaScript.
Canvas es quizs la parte ms visible del set de caractersticas de HTML5 con
nuevos demos, proyectos, etc.
Soporte de los Navegadores y Aceleracin por Hardware

Canvas es soportado a partir de FireFox 1.5, Opera 9, las nuevas versiones de
Safari, Chrome e Internet Explorer 9. La aceleracin por hardware es soportada
con algunas variaciones por todos los navegadores.
Que puede hacer Canvas y que No

La especificacin advierte de no usar Canvas para renderizar contenido esttico.
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 intil. El texto dibujado en Canvasno puede ser
seleccionado, buscado, o rastreado por las araas de la web. Por esa misma
razn,Canvas hace ms difcil la accesibilidad. Por ejemplo, si buscamos
redondear los bordes de un rea de texto seguramente conviene
utilizar CSS3 antes que Canvas.
La Performance de Canvas
Canvas puede ser muy rpido, pero est en manos del programador que esto se
cumpla. Muchas de las optimizaciones que deben ser tenidas en cuenta y llevadas
adelante quedan tambin en responsabilidad del programador. La velocidad juega
un papel importante, y cualquier desarrollador de Canvas serio debe
familiarizarse con los conceptos bsicos de performance de grficos como
invalidations y viewports.
Ejemplo Prctico: Creando un Canvas

El elemento <canvas> es similar a los tags <div>, <a> o <table>, con la
excepcin de que su contenido son renderizados con JavaScript. Para
implementarlo, necesitamos escribir el tag <canvas> en algn lugar del
cdigo HTML y crear una funcin de JavaScript que acceda a dicho tag una vez
que la pgina 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 Template
1
<!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 cdigo
9
10
};
11
12
</script>
13
</head>
14
<body>
15 <canvas id="myCanvas" width="578" height="200"></canvas>
16 </body>
17
</html>
El cdigo 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 funcin inicializadora podemos acceder al
objeto canvas DOM atravs del id y obtener el contexto 2-d
utilizando getContext().
Lneas
El mtodo beginPath() define un nuevo path de dibujo. El
mtodo moveTo() podemos pensarlo como una forma de posicionar el cursor de
dibujo. El mtodo lineTo() dibuja una lnea entre los puntos dados. El
mtodo stroke() asigna color a la lnea 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() {
19
var context = canvas.getContext("2d");
20
21
context.moveTo(100, 150);
22
context.lineTo(450, 50);
23
context.stroke();
24
};
25
26
</script>
27
</head>
28
<body>
30 </body>
31
</html>
Otros atributos:
lineWidth = ancho de la lnea.
strokeStyle = color de la lnea.
Paths y Curvas
Para 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
mtodos lineTo(), arcTo(), quadraticCurveTo() y bezierCurveTo() para
construir cada subpath. Podemos usar el mtodobeginPath() cada vez que

deseemos crear un nuevo path.
1
<!DOCTYPE HTML>
2
<head>
3
<style>
4
5
body {
6
margin: 0px;
7
padding: 0px;
8
}
9
10
#myCanvas {
11
12
}
13
</style>
14
15
<script>
16
19
20
21
22
// linea 1
23
24
25 // curva cuadratica
26 context.quadraticCurveTo(230, 200, 250, 120);
27
28
// curva bezier
29 context.bezierCurveTo(290, -40, 300, 200, 400, 150);
30
31
// linea 2
32
33
context.lineWidth = 5;
34
context.strokeStyle = "blue";
35
context.stroke();
36
};
37
</script>
38
</head>
39 <body>
41
</body>
42
</html>
Formas
Para crear una forma customizada con HTML5 Canvas, podemos crear un path y
luego cerrarlo utilizando el mtodo closePath(). Podemos usar los
mtodos 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
}
</style>
<script>
var canvas = document.getElementById("myCanvas");
// comienza la figura customizada
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
// se completa la figura customizada
context.closePath();
31
context.fillStyle = "#8ED6FF";
32
context.fill();
33
34
35
context.stroke();
36
};
37
</script>
38
</head>
39
<body>
41 </body>
42
</html>
Rectngulos
Para crear rectngulos podemos usar el mtodo rect(). A este lo podemos
posicionar con los parmetros x e y, y podemos setear su ancho y alto
con width y height respectivamente. La posicin es relativa al borde superior
izquierdo del rectngulo.
1
<!DOCTYPE HTML>
2
<head>
3
<style>
4
#myCanvas {
5
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
19
20
context.rect(188, 50, 200, 100);
21
context.fillStyle = '#8ED6FF';
22
context.fill();
23
24
context.strokeStyle = 'black';
25
context.stroke();
26
};
27
</script>
28
</head>
29 <body>
31
</body>
32
</html>
Crculo
Para dibujar un crculo en HTML5 Canvas podemos crear un arco usando el
mtodo 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
12
}
13
</style>
14
15
<script>
18
19
var centerX = canvas.width / 2;
20
var centerY = canvas.height / 2;
21
var radius = 70;
22
23
24 context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
25 context.fillStyle = "#8ED6FF";
26
context.fill();
27
28
context.strokeStyle = "black";
29
context.stroke();
30
};
31
32
</script>
33
</head>
34 <body>
36
</body>
37
</html>
Imgenes
Para dibujar una imagen usando HTML5 Canvas, podemos usar el
mtodo 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 {
5
margin: 0px;
6
padding: 0px;
7
}
8
#myCanvas {
9
10
}
11
</style>
12
<script>
13
16
var imageObj = new Image();
17
18
imageObj.onload = function() {
19
context.drawImage(imageObj, 69, 50);
20 };
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth21
vader.jpg";
22
};
23
24
</script>
25
</head>
26 <body>
28
</body>
29
</html>
Texto: Fuentes, Tamaos y Estilos
Para setear la fuente, el tamao 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
}
9
#myCanvas {
10
11
}
12
</style>
13
14
<script>
15
18
var x = 80;
19
var y = 110;
20
21
context.font = "60pt Calibri";
22
23
// stroke color
24
25
context.strokeText("Hola Mundo!", x, y);
26
};
27
28
</script>
29
</head>
30 <body>
32
</body>
33
</html>
Hasta aqu este tutorial de HTML5 pronto publicaremos mas tutoriales sobre este
tema.
Descargar Ejemplos:

Tutorial HTML5 en Español

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial HTML5 en Español

Enviado por

Direitos autorais:

Formatos disponíveis

Tutorial HTML5 en Espaol: Ejemplos Prcticos de HTML5 Canvas

El lenguaje HTML es de gran importancia para el desarrollo web,

Soporte de los Navegadores y Aceleracin por Hardware

Que puede hacer Canvas y que No

Ejemplo Prctico: Creando un Canvas

construir cada subpath. Podemos usar el mtodobeginPath() cada vez que

Você também pode gostar