HTML 5 Como reproducir audio en la página

Gracias a html 5 ya es posible reproducir archivos de audio desde una página WEB de una manera increiblemente sencilla

Ejemplo del reproductor html 5

El código es el siguiente Sigue leyendo

Anuncios

HTML5 como dibujar un cuadrado con fillRect y CANVAS

Por si no sabian que es canvas es un elemento HTML incorporado en HTML5 que permite generar gráficos estáticos y animaciones.
Osea, es una etiqueta html donde podemos hacer dibujos y animaciones

La sintáxis de canvas es

<canvas id=“identificador” width=“600” height=“600”> </canvas>

Donde width=“600” height=“600” definen el área de trabajo donde se podrá dibujar e id=”identificador” es el atributo que nos servirá como referencia al momento de dibujar sobre <canvas>.

En está ocación les mostraré como hacer un cuadrado dentro del elemento <canvas>

  • PASO 1 Configurar el doctype de la página y  escribir  etiqueta <canvas> con sus respectivos atributos
    <!DOCTYPE html>  (ESTO VA EN LA PRIMERA LINEA DE CÓDIGO)
    <canvas id=”identificador” width=”600″ height=”600″> </canvas>  (Dentro del <body>)
  • Paso 2.- Crear función JAVASCRIPT  que dibuje sobre canvas

function dibujar_cuadro()
{
var lienzo = document.getElementById(“lienzo”);
var trabajo = lienzo.getContext(“2d”); //Siempre requerida
trabajo.fillStyle=”#ccc”;
trabajo.fillRect(150,150,300,300);

  • Paso 3.- Agregar función al onload, para que sea ejecutada al abrir la página
<body onload=“dibujar_cuadro();”

Explicación de la función


* En la primera línea de nuestra función var lienzo = document.getElementById(“lienzo”); estamos almacenando en una variable al elemento <canvas> para poder trabajar con el.
* En la segunda línea  var trabajo = lienzo.getContext(“2d”); crea una variable llamada trabajo la cual tendrá los métodos para dibujar líneas, cuadros, círculos y más…
* La tercera trabajo.fillStyle=“#ccc“; está indicando que el color del relleno será “#ccc” mas o menos gris.
* La cuarta y última línea trabajo.fillRect(150,150,300,200); Está indicando el tamaño y la posición del cuadrado dentro de la etiqueta <canvas>
la función fillRect dibuja un cuadrado relleno con el color especificado en fillStyle y utiliza la siguiente sintáxis:

 fillRect(Espaciado a la izquierda , Espaciado superior, Ancho del rectangulo, Alto del rectangulo);

El código final quedará asi!
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title> Como dibujar un cuadrado con fillRect y CANVAS </title>
<script>
function dibujar_cuadro()
{
var lienzo = document.getElementById(“lienzo”);
var trabajo = lienzo.getContext(“2d”); //Siempre requerida
trabajo.fillStyle=“#ccc”;
trabajo.fillRect(150,150,300,200);
}
</script>
</head>
<body onload=”dibujar_cuadro();“>
<canvas id=”lienzo” style=“border:1px #D5D5D5 solid;” width=”600” height=”600“></canvas>
</body>
</html> 

Para mas información visitar: http://www.w3schools.com/html5/html5_ref_canvas.asp