Instituto Tecnolgico de Celaya

HTML5: Prctica #3 Utilizando canvas

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 Canvas es una de los componentes incorporados en HTML 5 que sirve para dibujar imgenes, grficos y animaciones en una pgina web de forma dinmica. Bsicamente es un lienzo disponible para dibujar mediante scripts sin necesidad de plugins adicionales (Flash), pues su funcionalidad viene integrada y soportada por el navegador. Un ejemplo de uso de la etiqueta es el siguiente: <canvas id="miCanvas" width="600" height="400"></canvas> En el cual se est definiendo un rea de 600x400 disponibles para el canvas. Con JavaScript se requiere definir 2 elementos para poder utilizar el canvas: var canvas = document.getElementById('miCanvas'); var Contexto = canvas.getContext('2d'); Como puede observarse, es necesario identificar el elemento canvas (la etiqueta) y el Contexto (definiendo si el canvas manejar 2d o webgl, es decir, 3d) mediante el mtodo getContext. Con este objeto contexto, pueden utilizarse las siguientes funciones y propiedades: Propiedad/Funcin beginPath closePath stroke strokeStyle moveTo lineTo lineWidth lineCap arc Definicin Ejemplo Se declara la creacin de una nueva ruta Contexto.beginPath() (path) en el canvas Se finaliza la creacin de una ruta Contexto.closePath(); Muestra las lneas que son parte de una Contexto.stroke(); ruta; sin ella, no son visibles Cambia el color de la lnea de trazado Contexto.strokeStyle = #660033; Reubica el punto actual del contexto Contexto.moveTo(100, 150); Traza una lnea desde el punto actual del Contexto.lineTo(450, 50); contexto hacia las coordenadas indicadas Modifica el ancho de la lnea de trazado Contexto.lineWidth = 4; Modifica la punta de la lnea. Valores Contexto.lineCap = 'round'; posibles: round, butt y square. Dibuja un arco indicando el centro, el radio, Contexto.arc(30, 50, 0, 2 * los ngulos de inicio y fin junto con el Math.PI, true); sentido de dibujo (true = contrario al giro de las manecillas del reloj) Dibuja un rectngulo indicando las Contexto.rect(100, 50, 200, coordenadas de la esquina superior 100); izquierda y las dimensiones (ancho y alto). Dibuja un rectngulo con relleno. Contexto.fillStyle = "yellow"; Contexto.fillRect(100, 50, 200, 100);

rect

fillRect

Instituto Tecnolgico de Celaya

HTML5: Prctica #3 Utilizando canvas

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014

lineTo

Consideraciones para trazar un arco Cabe mencionar que el canvas tiene su punto de origen (x, y) = (0, 0) en la esquina superior izquierda; a partir de ah, los movimientos a la derecha afectan a x de manera positiva (hacia la izquierda la x es negativa), mientras que los movimientos hacia abajo afectan a y positivamente (hacia arriba la y es negativa). Para dibujar una imagen y texto, se realiza lo siguiente: Imagen: Se utiliza el mtodo drawImage, que requiere una imagen de objeto, las coordenadas de la esquina superior izquierda y las dimensiones. Con el mtodo onload es posible mostrar la imagen en el canvas despus de que se descargue.

var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 69, 50, 100, 200); }; imageObj.src = '../Imgenes/imagen.jpg';

Instituto Tecnolgico de Celaya

HTML5: Prctica #3 Utilizando canvas

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 Texto: Se utiliza la propiedad font (para establecer la presentacin, tamao y fuente) y el mtodo fillText (requiere el texto y las coordenadas). var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.font = 'italic 40pt Calibri'; context.fillText('Hello World!', 150, 100); Se pueden usar las siguientes propiedades para modificar la presentacin del texto antes de utilizar el mtodo fillText: Establecer el color de relleno de las letras: context.fillStyle = 'blue'; Establecer el color de borde de las letras: context.strokeStyle = 'red'; Establecer la alineacin del texto: context.textAlign = 'center'; Los valores posibles son: o start (depende de la direccin del documento, se puede comportar como left o right). o end: (depende de la direccin del documento, se puede comportar como left o right) o left o center o right

Finalmente, es posible manejar 2 tipos de gradientes, principalmente para relleno de figuras: createLinearGradient(x,y,x1,y1) createRadialGradient(x,y,r,x1,y1,r1)

Ejemplo de gradiente lineal:

var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);

Instituto Tecnolgico de Celaya

HTML5: Prctica #3 Utilizando canvas

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 La funcin colorStop define un punto relativo (entre 0 y 1) que indica en qu parte debe cambiarse el color. A continuacin, ilustraremos el uso del canvas implementando el juego del gato: 1. Se declara la pgina web con los siguientes elementos: En el body se llama a la funcin mostrarTablero (por definir) Un canvas de 300 x 300 de longitud con el id tablero y el evento onClick llamando al mtodo procesar, que toma el parmetro event.

2. En un script, se genera lo siguiente: Se declaran las siguientes variables: fichaX, indicar donde hay una X en el tablero fichaO, indicar donde hay una O en el tablero inicio (en true), marca el comienzo del juego por la computadora contexto, referencia al canvas ancho y alto La funcin mostrarTablero, que obtiene la referencia al canvas, inicializa algunas de las variables iniciales y dibuja el tablero del gato con las funciones moveTo y lineTo: function mostrarTablero() { var tablero = document.getElementById('tablero'); ancho = tablero.width; alto = tablero.height; contexto = tablero.getContext('2d'); contexto.beginPath(); contexto.strokeStyle = '#000'; contexto.lineWidth = 4; contexto.moveTo((ancho / 3), 0); contexto.lineTo((ancho / 3), alto); contexto.moveTo((ancho / 3) * 2, 0); contexto.lineTo((ancho / 3) * 2, alto); contexto.moveTo(0, (alto / 3)); contexto.lineTo(ancho, (alto / 3)); contexto.moveTo(0, (alto / 3) * 2); contexto.lineTo(ancho, (alto / 3) * 2); contexto.stroke(); // confirma lo que se dibujara contexto.closePath();

Instituto Tecnolgico de Celaya

HTML5: Prctica #3 Utilizando canvas

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 if (inicio) { var ini = Math.floor(Math.random() * 9); marcarFicha(1 << ini, 'O'); // 1 << 2: 00000100 inicio = false; } else { inicio = true; } } La funcin marcarFicha, que determina la posicin (x, y) donde se dibujar una ficha. Adems, guarda la posicin de la ficha en las variables fichaX o fichaY segn corresponda: function marcarFicha(posicion, turno) { var bit = 1; var posX = 0, posY = 0; while ((posicion & bit) == 0) { bit = bit << 1; posX++; if (posX > 2) { posX = 0; posY++; } } if (turno == 'O') { fichaO = fichaO | bit; pintarFicha(posX, posY, 'O'); } else { fichaX = fichaX | bit; pintarFicha(posX, posY, 'X'); } } La funcin pintarFicha dibuja la ficha en la posicin indicada por los parmetros: function pintarFicha(x, y, ficha){ contexto.beginPath(); contexto.lineWidth = 4; var margenX = (ancho / 3) * 0.1; var margenY = (alto / 3) * 0.1; var inicioX = x * (ancho / 3) + margenX; var inicioY = y * (alto / 3) + margenY; var finX = (x + 1) * (ancho / 3) - margenX * 2; var finY = (y + 1) * (alto / 3) - margenY * 2;

Instituto Tecnolgico de Celaya

HTML5: Prctica #3 Utilizando canvas

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 if (ficha == 'X') { contexto.strokeStyle = '#ff0000'; contexto.moveTo(inicioX, inicioY); contexto.lineTo(finX, finY); contexto.moveTo(inicioX, finY); contexto.lineTo(finX, inicioY); } else{ contexto.strokeStyle = '#0000ff'; contexto.arc(inicioX + ((finX - inicioX) / 2), inicioY + ((finY - inicioY) / 2), (finX - inicioX) / 2 , 0, Math.PI * 2, true); } contexto.stroke(); contexto.closePath(); } La funcin procesar que recibe un parmetro y examina la posicin donde el usuario dio click para mostrar o no una ficha (si est ocupada la casilla). Adems, valida si ya hay un ganador o empate: function procesar(e) { var y = Math.floor(e.clientY / (alto / 3)); var x = Math.floor(e.clientX / (ancho / 3)); var bit = (1 << x + ( y * 3 )); if (esVacio(fichaX, fichaO, bit)) { marcarFicha(bit, 'X') if (!revisaEmpate()) { if (verificarGanador(fichaX)) { alert('Ganaste!!'); reiniciar(); } else { jugar(); if (!revisaEmpate()) { if (verificarGanador(fichaO)) { alert('Perdiste!!'); reiniciar(); } } } } } }

Instituto Tecnolgico de Celaya

HTML5: Prctica #3 Utilizando canvas

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 La funcin revisaEmpate checa si el tablero est vaco y no hay ganador: function revisaEmpate(){ if ((fichaX | fichaO) == 0x1FF) { alert('Empate!!'); reiniciar(); return true; } return false; } La funcin verificarGanador revisa si existe alguna combinacin ganadora para las fichas de X o de O: function verificarGanador(ficha) { return (((ficha | 0x1C0) == ficha) || ((ficha | 0x38 ) == ficha) || ((ficha | 0x7) == ficha) || ((ficha | 0x124) == ficha) || ((ficha | 0x92) == ficha) || ((ficha | 0x49) == ficha) || ((ficha | 0x111) == ficha) || ((ficha | 0x54) == ficha)) } La funcin reiniciar permite comenzar un nuevo juego, restableciendo las variables y el tablero a sus valores iniciales: function restart() { contexto.clearRect (0, 0, ancho, alto); fichaX = 0; fichaO = 0; mostrarTablero(); } La funcin esVacio determina si una casilla no tiene X u O: function esVacio(fichaX, fichaO, bit) { return (((fichaX & bit) == 0) && ((fichaO & bit) == 0)); } Las funciones simular, determinar y jugar establecen la jugada que efectuar la computadora:

function simular(fichaO, fichaX) { var ratio = 0; var bit = 0; for (var i= 0; i < 9; i++) { var cBit = 1 << i; if (esVacio(fichaX, fichaO, cBit)) { if (verificarGanador(fichaO | cBit)) { bit = cBit;

Instituto Tecnolgico de Celaya

HTML5: Prctica #3 Utilizando canvas

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 break; } else if (verificarGanador(fichaX | cBit)) { bit = cBit; } } } if (bit == 0) { for (var i= 0; i < 9; i++) { var cBit = 1 << i; if (esVacio(fichaX, fichaO, cBit)) { var result = determinar(fichaO, fichaX, 'X', 0, 1) if (ratio == 0 || ratio < result) { ratio = result; bit = cBit; } } } } return bit; } function determinar(fichaO, fichaX, player, bit, ratio) { if (player == 'O') { fichaO = fichaO | bit; } else { fichaX = fichaX | bit; } if (verificarGanador(fichaO)) { ratio *= 1.1; return ratio; } else if (verificarGanador(fichaX)) { ratio *= 0.7; return ratio; } else { var best = 0; ratio *= 0.6; for (var i= 0; i < 9; i++) { if (esVacio(fichaX, fichaO, 1 << i)) { var newRatio = think(fichaO, fichaX, player == 'O' ? 'X' : 'O', 1 << i, ratio); if (best == 0 || best < newRatio) {

Instituto Tecnolgico de Celaya

HTML5: Prctica #3 Utilizando canvas

Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 best = newRatio; } } } return best; } } function jugar() { var mejorOpcion = simular(fichaO, fichaX); marcarFicha(mejorOpcion, 'O'); }