1

Dibujando con canvas en Firefox OS

8Ene
en Canvas, Firefox OS, HTML5, Tutoriales

Hola a todos, hoy les traigo un tutorial acerca de como utilizar la etiqueta canvas en una aplicación para gráficos 2D dentro de Firefox OS. Una herramienta importante que podemos utilizar para desarrollar juegos utilizando las potencialidades que brinda HTML5.

Manos a la obra.

Lo primero es crear nuestro archivo de manifiesto para nuestra aplicación de Firefox OS. En el mismo especificaremos nuestros datos como desarrollador y autor, el nombre del proyecto y la versión, así como los permisos e iconos a utilizar.

{
"name": "Canvas Demo",
"version": "1.0",
"description": "Demo de canvas en FirefoxOS",
"launch_path": "/index.html",
"permissions": {},
"developer":{
"name": "Carlos Osiel Rojas Velázquez",
"email": "corojas@uci.cu",
"url": "https://humanos.uci.cu"
},
"icons": {
"60": "/style/icons/icon_60.png",
"128": "/style/icons/icon_128.png"
},
"fullscreen":"true"
}

Además de las propiedades explicadas anteriormente se encuentran las propiedades launch_path y fullscreen. La primera indica cuál es el archivo a ejecutar y la segunda que nuestra aplicación deberá ejecutarse a pantalla completa. Una vez que tenemos estos datos necesitamos crear nuestro fichero HTML con una estructura básica, pero con una etiqueta canvas dentro del cuerpo del documento. Esta etiqueta debe poseer un ID para utilizarlo desde un fichero javascript.

<html>
<head>
<meta charset="UTF-8">
<title>Demo Canvas</title>
<script type="text/javascript" src="demoCanvas.js"></script>
</head>
<body>
<canvas id="area-dibujo" width="auto" height="auto">No soporta canvas el navegador</canvas>
</body>
</html>

También debemos de incluir el fichero javascript que vamos a utilizar en el ejemplo. En mi caso lo he nombrado demoCanvas.js. Dentro de la etiqueta canvas establecimos las propiedades de ancho y alto para que se adaptara al contenido dibujado. Lo primero es obtener el elemento que representa la etiqueta, pero para poder acceder al árbol DOM del archivo HTML debemos esperar que este cargue completamente, por lo que agregaremos la instrucción para obtener el elemento canvas cuando se haya lanzado el evento load del documento HTML.

var areaDibujo = null;  //representa el objeto HTML canvas
var contexto = null; //representa el contexto de dibujo
window.onload = function(){
areaDibujo = document.getElementById('area-dibujo');  //se obtiene el objeto HTML de la etiqueta canvas
contexto = areaDibujo.getContext("2d"); //se obtiene el contexto para dibujar
demoCanvas();  //se llama a una función para controlar el flujo de dibujo.
}

Con esto tenemos ya todo lo necesario para comenzar a dibujar, como es un ejemplo bastante simple vamos a realizar el dibujo de un rectángulo utilizando la función fillRect, a la cuál se le pasan como parámetros la posición X y Y desde donde se comenzará a dibujar y el ancho y alto del rectángulo, si queremos hacer un cuadrado solo tenemos que igualar estos valores.

La función de dibujo quedaría de la siguiente forma:

function demoCanvas()
{
   contexto.fillStyle = "#c72e32"; //escogiendo el color de relleno
   contexto.fillRect(0,0,100,200); //dibujando el rectángulo
}

El ejemplo se vería algo similar a esto:

demoCanvasEn próximas entregas estaré hablando sobre el uso de rejillas o sprites, el audio en los videojuegos, animación, entre otros temas para fomentar los conocimientos acerca del tema.

Etiquetado en:

1 Comentario

  1. Erick dice:

    Buen artículo para introducir el tema. Creo que las aplicaciones para juegos son de las más interesantes de desarrollar, ya que suponen el reto de llevarlas a la web con las nuevas tecnologías y lenguajes.

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.