Ediciones ENI Editorial | líder en informática
Diseño (HTML5 CANVAS)
Presentación del API HTML5 CANVAS
HTML5 CANVAS (cf. etiqueta <canvas>) es un API de diseño, que permite manipular dinámicamente las imágenes bitmap, con scripts escritos en JavaScript. Este API está soportado por la mayoría de las versiones recientes de los principales navegadores.
<canvas>, nuevo elemento en HTML5, se usa para realizar gráficos simples, incluso animaciones (sin alcanzar el grado de sofisticación de Adobe Flash).
Inicialmente, <canvas> fue implementado en Apple Mac OS X (Dashboard); después, se soportó en el navegador Safari y, para terminar, en Mozilla Firefox (Gecko 1.8).
En los ejemplos de este capítulo, se va a utilizar el elemento <canvas> en el diseño de un conjunto de tipo TicTacToe (también llamado Morpion).
La serie de ejemplos (basados todos en el TicTacToe), le permitirá adquirir conocimientos básicos sobre lo que se puede hacer con <canvas>.
En la red, puede encontrar muchos tutoriales más completos sobre <canvas>, como el de la fundación Mozilla (https://developer.mozilla.org/es/docs/Web/HTML/Canvas).
Ejemplos de aplicaciones del elemento <canvas>
1. Ejemplo 1: Dibujar un cuadrado sencillo
En este primer ejemplo, vamos a dibujar un cuadrado muy sencillo. Será la base de la futura matriz de TicTacToe.
Sección HTML <head>
Esta sección no tiene nada específico. Hay una simple etiqueta meta y el título del script.
<!-- Inicio encabezado script HTML -->
<head>
<!-- Etiqueta meta -->
<meta http-equiv="Content-Type" contenido="text/html; charset=utf-8" />
<!-- Título del script HTML -->
<title>MORPION_01</title>
</head> Sección HTML <body>
El código de la sección <body> se reproduce completamente a continuación:
<!-- Establece el elemento HTML canvas -->
<!-- NB: - Longitud del canvas: 1000 -->
<!-- - Altura del canvas: 800 -->
<canvas id="matrizMorpion" width="1000" height="800">
Atención, su navegador no soporta el elemento Canvas
</canvas>
<!-- Código Javascript asociado al canvas -->
<script type="text/javascript">
/* Definición de la ubicación del canvas */
var ubicacionCanvas = document.getElementById("matrizMorpion");
/* Definición del contexto del canvas (2D) */
var contextoCanvas = ubicacionCanvas.getContext("2d");
/*
Representación en el canvas
*/
/* Definición de las propiedades de los trazos */
contextoCanvas.strokeStyle = "black";
contextoCanvas.lineWidth = 1;
/* Inicio del recorrido de la línea punteada */
contextoCanvas.beginPath();
/* Punto de inicio del trazo (x, y) */
contextoCanvas.moveTo(10, 10);
/* Representación del trazo superior horizontal */
contextoCanvas.lineTo(110, 10);
/* Representación del trazo derecho vertical...