El elemento canvas es un elemento definido en el código HTML utilizando el ancho y la altura atributos . El poder real del elemento canvas , ​​sin embargo, se lleva a cabo mediante el aprovechamiento de la API de HTML5 Canvas. Esta API se utiliza al escribir JavaScript que pueden acceder al área canvas a través de un conjunto completo de funciones de dibujo , permitiendo así que los gráficos generados dinámicamente .

Lo bueno del uso de Canvas

Estas son algunas razones por las que podría querer considerar aprender a usar la función de la lona de HTML5:

La interactividad. Canvas es totalmente interactivo. responde  a las acciones del usuario detectando eventos del teclado, ratón o tocar. Así que un desarrollador no se limita a sólo gráficos estáticos e imágenes.

Animación. Cada objeto dibujado en el lienzo puede ser animado. Esto permite que todos los niveles de las animaciones que se creen, desde pelotas de rebote simples a complejas adelante y cinemática inversa.

Flexibilidad. Los desarrolladores pueden crear casi cualquier cosa usando canvas. Puede mostrar líneas, formas, texto, imágenes, etc. – con o sin animación. Además, la adición de vídeo y / o audio a una aplicación canvas también es posible.

Navegador / Plataforma de Apoyo. HTML5 Canvas es compatible con todos los navegadores más importantes y se puede acceder a una amplia gama de dispositivos, incluyendo computadoras de escritorio, tabletas y teléfonos inteligentes.

Popularidad. Popularidad de canvas es rápida y en constante crecimiento por lo que no hay escasez de los recursos disponibles.

Es un estándar web. A diferencia de Flash y Silverlight, Canvas es tecnología abierta que es parte de HTML5. Y aunque no todas sus características se implementan en todos los navegadores, los desarrolladores pueden tener la certeza de canvas tendrá soporte de manera indefinida.

Herramientas gratuitas y accesibles de desarrollo. Las herramientas básicas para la creación de aplicaciones de Canvas HTML5 son sólo un navegador y un buen editor de código. Además, hay muchas bibliotecas y herramientas grandes y gratuitos para ayudar a los desarrolladores con el desarrollo de Canvas  avanzada.

¿Que aplicaciones le puedo dar a Canvas?

Canvas  es genial  . Pero, ¿qué se puede hacer? Vamos a ver.

Gaming. Conjunto de características Los HTML5 Canvas ‘ es un candidato ideal para la producción de todo tipo de juegos en 2D y 3D .

Publicidad . HTML5 Canvas es un gran reemplazo para banners y anuncios basados ​​en Flash . Tiene todas las características necesarias para atraer la atención de los compradores.

Representación de Datos. HTML5 puede recoger datos de fuentes de datos globales y utilizarlo para generar gráficos visualmente atractivos e interactivos y gráficos con el elemento canvas .

Educación y Formación. Canvas de HTML5 se pueden utilizar para producir experiencias eficaces y atractivas de aprendizaje, combinando texto , imágenes , videos y audio.

Arte y Decoración . Con un poco de imaginación y gran variedad de tela de colores , gradientes , patrones, la transparencia , sombras , y las características de recorte , todo tipo de gráficos artísticos y decorativos se pueden extraer .

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Canvas</title>

</head>

<body>

<canvas id="exampleCanvas" width="500" height="300" style="border: 1px solid blue">

  <!-- OPTION 1: leave a message here if browser doesn't support canvas -->

    <p>Your browser doesn’t currently support HTML5 Canvas.

    Please check caniuse.com/#feat=canvas for information on

    browser support for canvas.</p>

  <!-- OPTION 2: put fallback content (text, image, Flash, etc.)

                 if the browser doesn't support canvas -->

</canvas>

<script>

var canvas = document.getElementById('exampleCanvas'),

    context = canvas.getContext('2d');

</script>

</body>

</html>

 

Por defecto, el navegador crea elementos Canvas con un ancho de 300 píxeles y una altura de 150 píxeles, aunque no estén especificados en el código HTML. Usted puede cambiar el tamaño especificando el ancho y alto, como lo he hecho en el código HTML.

También  le hemos dado a Canvas un atributo id que usaremos en nuestra JavaScript. Y finalmente, si lo desea, puede utilizar CSS para agregar un borde para hacer Canvas visible por medio de un marco delgado. Esto no es necesario, se utiliza como una ayuda visual para nosotros ver el límite del elemento canvas.

Nótese que entre la apertura y cierre <canvas> etiquetas, he añadido el contenido que se mostrará si el navegador no soporta canvas. Esto puede ser casi cualquier tipo de contenido que es compatible con un navegador antiguo.

El JavaScript comienza con dos líneas. En la primera línea, creamos una variable que almacena nuestro elemento lienzo a través de su ID. La segunda línea crea una variable (contexto) que hace referencia al contexto 2D para el Canvas utilizando la función getContext (). Vamos a utilizar la variable de contexto para acceder a todas las funciones y propiedades de dibujo lienzo.

Con nuestro lienzo listo para que podamos empezar a experimentar con la API Canvas.

Ahora con el sistema de Coordenadas 2d de Canvas

En un espacio 2D , las posiciones se referencian utilizando coordenadas X y Y . El eje X se extiende horizontalmente , y el eje Y se extiende verticalmente . El centro tiene una posición x = 0 y  y = 0 , que tambiénse puede expresar como ( 0 , 0 ) . Este método de posicionamiento de objetos , que se utiliza en matemáticas, se conoce como el sistema de coordenadas cartesianas .

Captura de pantalla 2015-02-25 a las 17.10.47El sistema de coordenadas de Canvas , sin embargo , sitúa el origen en la esquina superior izquierda del lienzo , con coordenadas X creciente a la derecha y las coordenadas creciente hacia la parte inferior del lienzo . Así que a diferencia de un estándar de espacio de coordenadas cartesianas , el espacio lienzo no tiene puntos negativos visibles . Usando coordenadas negativas no hará que su aplicación falle , pero los objetos colocados utilizando coordinar negativo puntos no aparecerán en la página.

Dibujo de líneas

Para dibujar una línea , se utilizan cuatro métodos de la API de la Canvas. Empezamos con el método beginPath () que indica al navegador que preparar para dibujar un nuevo camino. A continuación, se utiliza el método moveTo (x , y) para establecer el punto de partida de la línea. Entonces método lineTo (x , y) establece el punto final y dibuja la línea mediante la conexión de los dos puntos.

En este punto se traza la línea , pero sigue siendo invisible. Para hacerlo visible utilizamos el método de carrera () para mostrar la línea con el color negro por defecto .

context.beginPath();

context.moveTo(50, 50);

context.lineTo(250, 150);

context.stroke();

 

Dibujar rectángulo

Para dibujar un rectángulo , podemos utilizar el método fillRect ( x, y, ancho, alto ) para establecer las coordenadas y las dimensiones, junto con la propiedad fillStyle para establecer el color de relleno .

context.fillStyle = 'red';

context.fillRect(50, 130, 300, 100);

Dibujar texto

 Dibujar Texto

Para dibujar texto en Canvas, podemos utilizar fillText (cadena, x , y) junto con la propiedad de fuente para establecer la fuente , el tamaño y el estilo del texto (similar a font en CSS ) .

context.font = 'italic 40pt Calibri, sans-serif';

context.fillText('Hello World!', 50, 50);

Les comparto el codigo  ejemplo a travez der CODEPEN.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”MYXWpR” default_tab=”result” user=”fmorenor”]See the Pen MYXWpR by Francisco Moreno (@fmorenor) on CodePen.[/codepen_embed]