.

Breaking News
recent

-

HTML5 Canvas [Basico] 1/X

Estaba aburrido, así que pensé en hacer algo de provecho entre tanta basura que agregan en mundo linux... Es como usar Canvas con Javascript, sin mas que decir inicio.

Canvas: (En español lienzo) Es un elemento de HTML recién agregado en HTML5 que permite generar gráficos por medio de lenguajes scripting (Como Javascript).

Permite crear juegos, animaciones, composición de imagenes, entre otras cosas.

Hoy como es el primer post (si no me da pereza explico como hacer el juego snake) comenzare con un Hola Mundo! como con cualquier lenguaje de programación:

>> Comenzamos agregado una estructura básica HTML5
HTML5 Canvas [Basico] 1/X

>> Agregamos entre las body el tag de canvas y le asignamos un id en este ejemplo myCanvas
web

>> Abrimos tags para el script bajo la de canvas, debe cargar antes de que JS busque donde esta canvas y/o accionar los valores
Programacion


>> Ahora comienza lo divertido
1.- Comenzamos asignando a una variable nuestro elemento canvas y también asignamos en otra variable getContext, ¿Por que? Porque al necesitar una propiedad 2d de canvas es mas fácil llamar:
ctx.propiedad que
document.getElementById("myCanvas";).getContext("2d";).propiedad

2.- Establezco los valores de dos variables mas W (Width en español Ancho) y H (Height en español Alto) en 300, en el proceso se darán cuenta que es para ahorrar caracteres.

3.- Y para finalizar por el momento... Al ancho y alto de canvas asigno las variables antes declaradas
Javascript

>> Y al abrirlo en el navegador tenemos un hermoso cuadro de nada... (No lo olviden guardarlo como ejemplo.html y abrirlo con algún navegador web IE no es un navegador...)
juego

>> Somos desesperados por naturaleza queremos ver que hemos hecho ya, voy a agregar un background a el canvas que he creado, asignamos la propiedad fillStyle en la variable ctx y agregamos el color en este caso "#151515", e indicamos el lugar donde queremos colorear con fillRect.

Explicación de fillRect:
fillRect(Numero X, Numero Y, Numero W, Numero H)
donde:
Con Numero X y Y se refiere a posición.
Con Numero W y H se refiere a ancho y alto (Width, Height) de la figura.
Entonces lo que básicamente pasa es que creamos un rectangulo de cierto color que abarca desde la posicion 0,0 de canvas hasta el tamaño del canvas 300 asignados en las variables W y H.
HTML5

>> Ahora así al actualizar vemos un hermoso cuadro negro generado solo con Scripting
CSS3

>> Ahora para terminar por hoy hay que agregar un texto todo lo vamos a hacer desde nuestro ctx.
ctx.font = Agregamos el tamaño y la fuente a utilizar
ctx.fillStyle = Exactamente igual que la vez pasada, agrego el color de el texto
ctx.textAlign = Simplemente para alinear el texto, intenten comentar o cambiar el valor a left o right
ctx.fillText("Texto entre comillas", numero X, Numero Y) Numero X y Y igual que antes se refiere a posición

Para aclarar en ctx.fillText("Texto", W/2, 25); tomo el valor de W que es el ancho total del canvas, y lo divido entre dos para obtener la mitad (hahahahaha lo explico considerando que lo hago a una persona que se cayó muchas veces de cabeza) 300/2 = 150 y 25 entonces son 150px de izquierda a derecha y 25px de arriba hacia abajo.

Aunque no inicia el texto justamente en la mitad es por la propiedad textAlign que hace que el punto se posicione en la mitad de nuestra frase.
HTML5 Canvas [Basico] 1/X

>> Y listo tenemos nuestro primer mensaje en canvas
web
>> Solo para aclarar dijimos que le dimos a canvas posición 0, 0 en X y Y pero ¿Por que aparece un margen  blanco y no esta pegado con los bordes del navegador? Simple los navegadores por lo general tienen por defecto margin y/o padding entonces solo creamos un style en nuestro head y
agregamos:
* { padding: 0px; margin: 0px }
Para que el documento no tenga borde ni relleno, por cierto el aterisco ( * ) es conocido como un comodín, y lo que hace es aplicar a todas los tags las propiedades asignadas.
Programacion

>> Asi queda sin margenes ni rellenos.
Javascript

Eso es todo por el momento gente, es muy básico lo hice pensando en algún alma solitaria que quiere comenzar su aventura creando juegos en HTML5 hahahaha nos leemos gente

El código para los holgazanes http://paste.desdelinux.net/4988

Acá la parte dos
http://www.mundo-linux-b.blogspot.com/ vas-Basico-2-X.html

No hay comentarios:

Publicar un comentario

-

Con la tecnología de Blogger.