EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            animaciones css3 keyframes
            Animaciones basadas en keyframes con la propiedad animation
            16/11/2019
            animaciones canvas
            Animaciones en Canvas
            21/11/2019

            Elemento Canvas en HTML5

            canvas html5

            canvas html5

            Tabla de contenidos

            • 7. Elemento Canvas en HTML5
            • 7.1. Pasos para crear un Canvas:
            • 7.2. Formas básicas en Canvas
              • 7.2.1. Rectángulos
              • 7.2.2. Líneas
              • 7.2.3. Arcos
              • 7.2.4. Texto
              • 7.2.5. Imágenes
            • Ejercicios propuestos

            En la unidad anterior vimos cómo hacer transformaciones y transiciones sobre los elementos de nuestra página web. De esta forma conseguíamos proporcionar a los elementos un efecto de animación sobre algunas propiedades básicas de CSS. Además, en esta unidad también hemos visto cómo utilizar la propiedad animation de CSS para crear animaciones concatenadas.

            En este apartado vamos a seguir viendo cómo crear animaciones, pero en esta ocasión veremos el elemento <canvas>. Este elemento nos permite pintar gráficos, crear animaciones y desarrollar videojuegos mediante un API de Javascript. 

            7. Elemento Canvas en HTML5

            Lo primero que tenemos que hacer para trabajar con Canvas es crear un lienzo y, a partir de ese lienzo, incluir elementos y modificarlos. Veamos los pasos a seguir.

            7.1. Pasos para crear un Canvas:

            Para utilizar Canvas haremos lo siguiente:

            1) Crearemos un lienzo (espacio rectangular vacío) en el que serán mostrados todos los elementos:

            <canvas id="lienzo" width="500" height="300"> 
                 El navegador no soporta canvas 
            </canvas> 

            2) Accedemos al elemento <canvas> desde Javascript:

            Primero, accedemos al objeto DOM del elemento, normalmente, a través del método getElementById, y posteriormente, utilizamos el método getContext para obtener el contexto de dibujo, sobre el cual, se puede dibujar. 

            var ctx=null, canvas=null;
            function iniciar()
            {
                  canvas=document.getElementById('lienzo');
                  ctx=canvas.getContext('2d');
            }
            window.addEventListener("load", iniciar, false);

            En el ejemplo anterior, guardamos una referencia al elemento <canvas> en la variable canvas y el contexto de dibujo lo creamos utilizando getContext(‘2d’). Con esto obtenemos un contexto para dibujar en 2 dimensiones. 

            3) Dibujar formas en el lienzo:

            A continuación, podemos empezar a crear formas y realizar manipulaciones según las coordenadas concretas del contexto. Veamos las formas básicas que podemos crear en nuestro lienzo.

            7.2. Formas básicas en Canvas

            7.2.1. Rectángulos

            La función fillRect(x, y, width,height) nos permite dibujar un rectángulo ‘relleno’ y la función strokeRect(x, y,width, height) un rectángulo con sólo su contorno. Mediante lineWidth especificamos el ancho de su contorno.

            Se puede establecer el color mediante las propiedades fillStyle y strokeStyle. Es posible usar rgb, rgba, un código hexadecimal o la palabra clave de un color.

            ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
            ctx.fillRect(100, 10, 60, 50);
            ctx.lineWidth = 5
            ctx.strokeStyle = "red";
            ctx.strokeRect(200, 70, 60, 50);

            Mediante la función clearRect(x, y, width, height) podemos borrar cualquier elemento que haya sido dibujado en el Canvas dentro de un área.

            ctx.clearRect(210, 20, 25, 25);

            7.2.2. Líneas

            Para indicar que queremos dibujar una línea lo primero que debemos hacer es llamar a la función beginPath().

            A continuación llamaremos a moveTo(x, y) para movernos a la posición donde nuestra línea comenzará. Y a lineTo(x, y) para ‘dibujar’ la línea. Para hacerla visible utilizaremos la función stroke().

            Podemos especificar el ancho y el color de la línea con las propiedades lineWidth y strokeStyle.

            ctx.beginPath();
            ctx.moveTo(5, 5);
            ctx.lineTo(5, 295);
            ctx.moveTo(295, 5);
            ctx.lineTo(295, 295);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#CC0000";
            ctx.stroke();

            7.2.3. Arcos

            Para indicar que vamos a dibujar un arco llamaremos inicialmente a la función beginPath(). Dibujaremos un arco o un círculo con la función arc(x, y, radio, angIni, angFin, sentidoAntihorario). X e y indican el centro del círculo, y los ángulos han de indicarse en radianes. El arco no será visible hasta llamar a fill() o a stroke().

            ctx.beginPath();
             // 2*Math.PI es la manera corta de expresar 360 grados
             // en radianes.
             // var radianes = (Math.PI / 180) * grados;
             ctx.arc(150, 150, 50, 0, 2*Math.PI);
             ctx.lineWith = 10;
             ctx.strokeStyle = "yellow";
             ctx.stroke();

            7.2.4. Texto

            A través de la función fillText(texto, x, y) podemos dibujar texto dentro del Canvas. Podemos dar formato al texto estableciendo previamente las propiedades font, textAlign y fillStyle.

            ctx.font = 'Bold 20px Tahoma';
            ctx.textAlign = 'center';
            ctx.fillStyle = 'black';
            ctx.fillText('ENIUN', 50, 50);

            7.2.5. Imágenes

            Para añadir una imagen lo primero que tenemos que hacer es crear un objeto Image y establecer su propiedad src.
            Con la función drawImage(objImg, x, y) añadiremos la imagen al Canvas.

            var img = new Image();
            img.src = 'img/eniun.png';
            img.onload = function(){
               ctx.drawImage(img, 10, 10);
            };

            Si ejecutamos el método .drawImage() sin llamar al evento .onload puede que no se ejecute correctamente si todavía no se ha cargado la imagen. Por este motivo se utiliza el evento .onload.

            Más información:

            • HTML5 Canvas reference
            • HTML5 Canvas Cheat Sheet

            Ejemplo con todos los elementos estudiados:

            default

            Ver más ejemplos de creación de formas

            Comprueba tu aprendizaje

            ¿Con qué función podemos dibujar un rectángulo relleno en Canvas?

            ¡Bien! ¡Has fallado!

            ¿Cómo puedo alterar el comportamiento dentro del Canvas?

            ¡Bien! ¡Has fallado!

            ¿Cómo puedo dibujar un texto dentro de Canvas?

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 7

            Añade un nuevo artículo en el blog de tu proyecto web que pinte un Canvas con todos los elementos que hemos visto.

            Compartir

            UD6. Sonido, Vídeo y animaciones

            • 1. Formatos de vídeo y conversiones
            • 2. Inserción de vídeo en HTML5
            • 3. Formatos de audio y optimizaciones
            • 4. Inserción de audio en HTML5
            • 5. Control de vídeo y audio con JavaScript
            • 6. Animaciones con propiedad animation
            • 7. Canvas en HTML5
            • 8. Animaciones en Canvas
            • 9. Referencias y recursos: sonido, vídeos y animaciones

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results