Modulo: Canvas Prof. Romario Fuentes
Introducción HTML 5 pretende proporcionar una plataforma para desarrollar aplicaciones web donde su ejecución dentro de un navegador no implique falta de recursos o facilidades para resolver las necesidades reales de los desarrolladores. Para ello se han creado unas APIs que permitan trabajar con cualquiera de los elementos de la página y realizar acciones.
¿Pero que es una API? (Application Programming Interface) interfaz de programación de aplicaciones es un conjunto de protocolos y herramientas usado por desarrolladores . Como decíamos, no sólo se trata de incorporar nuevas etiquetas o eliminar otras, sino que supone mejoras en áreas
¿Qué es Canvas? es un componente que permitirá dibujar, por medio de las funciones de un API, en la página todo tipo de formas, que podrán estar animadas y responder a interacción del usuario. Esta API nos permite realizar estas acciones dentro de nuestra página web sin usar plugins de terceros.
Requerimientos básicos Usar el elemento <canvas> no es algo muy díficil pero necesita saber y entender los aspectos básicos del HTML y JavaScript
Que podemos crear con <canvas> Canvas permite realizar gráficos de todo tipo: Juegos interactivos Agregar efectos de texto Efectos dinámicos en interfaces de usuario Manipular imágenes Aplicaciones de visión artificial, etc.
Creación del elemento <canvas> Para empezar con el uso del elemento canvas necesitamos ir al <body> de nuestro documento HTML Una vez dentro de las etiquetas <body> creamos la siguiente etiqueta:
Esta etiqueta, como decíamos forma parte del estándar del HTML 5. Como pudimos observar en la imagen anterior el elemento <canvas> requiere de ciertos atributos dentro de su declaración. Los atributos esenciales para el elemento son: Atributos width y height: anchura y altura del área del canvas. Atributo id: Asignarle un nombre único y luego referirnos a este canvas desde Javascript.
Personalización del <canvas> El tamaño por defecto del canvas es 300px * 150px. [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Se pueden agregar mas atributos de manera opcional, por ej. <style> para estilizar el elemento a través de atributos CSS.
El contexto de renderización <canvas> crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D.
Contextos en <canvas> Aparte de tener el contexto 2D tenemos otros contextos para trabajar diferentes tipos de renderizaciones; por ejemplo: WebGL usa un 3D contexto ("experimental-webgl") basado sobre OpenGL ES. Recuerda que El canvas esta inicialmente en blanco. El elemento <canvas> tiene un method llamado getContext(), usado para obtener el contexto a renderizar y sus funciones de dibujo.
Accediendo a través de un script getContext() es el método mediante el cual definimos el contexto de renderizado (“2d”). Recuerda que primero debemos acceder al canvas, una forma sencilla seria a través de las siguientes líneas de código:
Estructura básica del <canvas>
Dibujando formas básicas en <canvas> Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectángulos que se intersectan, uno de los cuales tiene alpha transparencia. Para comprender por qué la posición de esos cuadros en el Canvas debemos primero conocer cómo funciona la cuadricula del Canvas
1. Se crea el elemento <canvas>. 2 1. Se crea el elemento <canvas>. 2. Se hace referencia dentro de una variable. 3. Se define el contexto. 4. Se invocan los métodos para dibujar dentro del canvas. 5. Se le asigna un color de relleno distinto a cada uno.
Coordenadas del Canvas (cuadricula) Para posicionar elementos en el canvas tenemos que tener en cuenta su eje de coordenadas en dos dimensiones(X & Y) que comienza en la esquina superior izquierda. Por tanto, la esquina superior izquierda será el punto (0,0). La esquina inferior derecha el punto definido por (width, height), osea, el punto máximo de coordenadas marcado por su anchura y altura.
Coordenadas de <canvas> Las coordenadas son X, Y X representa la linea horizontal. Y representa la linea vertical. Su limite se define según las medidas del width y height que hayas definido al momento de crear el elemento.
Dibujando rectángulos dentro de <canvas> En una forma primitiva canvas soporta Rectángulos, Todas las otras formas deben ser creadas por la combinación de uno o más trazos, listas de puntos conectados por líneas. Afortunadamente, tenemos una variedad de funciones para dibujar trazos que hacen posible componer formas muy complejas. Primero veamos el rectángulo. Aquí hay tres funciones que podemos usar en el canvas para dibujarlos:
fillRect(x, y, width, height) sirve para dibujar rectángulos rellenos de color. Recibe cuatro parámetros strokeRect(x, y, width, height) sirve para dibujar simplemente la silueta de un rectángulo, es decir, sólo su borde. El esquema de parámetros es el siguiente: strokeRect(x,y,anchura,altura) clearRect(x, y, width, height) sirve para borrar áreas rectangulares de un canvas y hacerlas totalmente transparentes o sin contenido gráfico.
Agregar color a los trazos Cambiar el color de relleno con fillStyle: ctx.fillStyle = '#990000' Cambiar el color de trazado con strokeStyle: ctx.strokeStyle = '#000099'; Otras notaciones para definir colores en canvas: a. Color con nombre: "blue" • b. Color con RGB hexadecimal, como se define en HTML: "#ff6600" c. Color con RGB en base decimal: "rgb(100, 25, 206)" d. Color RGBA (canal alpha o transparencia, como en CSS3): "rgba(255, 125, 0, 0.5)" e. Con RGB y porcentaje: "rgb(100%, 20%, 0)"
Insertando texto en <canvas> Para dibujar texto en <canvas>, los mas importantes métodos son: font - define las propiedades de fuente para el texto fillText ( ’texto’, x, y ) - dibuja texto "lleno" en el lienzo strokeText ( ’texto’, x, y ) - dibuja texto en el lienzo (sin relleno)
Dibujando trazos en <canvas> beginPath() Esta función sirve para decirle al contexto de canvas que vamos a empezar a dibujar un trazo moveTo() Sirve para mover el puntero imaginario donde comenzaremos a hacer el trazo. Esta función no dibuja nada en sí, pero nos permite definir el primer punto de un camino. lineTo() Esta función provoca que se dibuje una línea recta, desde la posición actual del puntero de dibujo, hasta el punto (x,y) que se indique como parámetro
fill() método del contexto del canvas sirve para rellenar de color el área dibujada por un trazo. closePath() Cierra el trazo de tal forma que los comandos de dibujo futuros son, una vez más redireccionados al contexto. stroke() Muy similiar a fill() con la diferencia que fill() rellenaba de color y stroke() tan solo dibuja la silueta. Además, en el caso de fill() se necesitaba tener el camino cerrado, por lo que se cerraba
Ejercicio 1
Ejercicio 2