55-canvas en html

Jorge Catalao octubre 29, 2024
HTML




1. Introducción a HTML Canvas

El elemento <canvas> en HTML se utiliza para dibujar gráficos en una página web. Es un contenedor para gráficos que permite realizar representaciones visuales dinámicas a través de JavaScript.

Para crear gráficos, necesitas utilizar JavaScript, ya que el <canvas> por sí solo no puede dibujar. Con el Canvas, puedes realizar diversas operaciones, como dibujar rutas, cajas, círculos, texto y añadir imágenes.

El gráfico a continuación muestra diferentes elementos que se pueden crear utilizando <canvas>: un rectángulo rojo, un rectángulo de gradiente, un rectángulo multicolor y texto multicolor.

Además, el Canvas es compatible con todos los principales navegadores, lo que lo convierte en una herramienta versátil para desarrolladores web.


Ejemplo


Código del ejemplo 

          // Código para el ejemplo visual
          <canvas id="miCanvas" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var canvas = document.getElementById('miCanvas');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'green';
            ctx.fillRect(10, 10, 150, 100);
          </script>


...
2. Configuración del Lienzo

Para utilizar el elemento <canvas>, primero debes configurarlo correctamente en tu documento HTML. El elemento <canvas> se define con el atributo width y height para establecer el tamaño del lienzo.

El siguiente código muestra cómo crear un lienzo con un ancho de 400 píxeles y una altura de 200 píxeles. También puedes aplicar estilos CSS para personalizar su apariencia, como bordes y fondos.


Ejemplo


Código del ejemplo 

          <canvas id="miLienzo" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>


3. Introducción a JavaScript y Canvas

JavaScript es un lenguaje de programación que permite crear contenido interactivo en la web. Cuando se trabaja con el elemento <canvas>, JavaScript se utiliza para dibujar y manipular gráficos en el lienzo.

La interacción entre JavaScript y Canvas se logra a través del contexto de dibujo que proporciona el lienzo. Puedes utilizar JavaScript para realizar tareas como dibujar formas, aplicar colores, y animar gráficos en tiempo real.

En el siguiente ejemplo, veremos cómo inicializar el contexto de un lienzo y dibujar un simple rectángulo en él utilizando JavaScript.


Ejemplo


Código del ejemplo 

          <canvas id="canvasJS" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var canvas = document.getElementById('canvasJS');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'blue';
            ctx.fillRect(50, 50, 100, 50);
          </script>


4. Ejemplos de Dibujo en Canvas

Ejemplo: Dibujar una Línea


Código del ejemplo 

    <canvas id="canvasLinea" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
    
    <script>
        var c = document.getElementById("canvasLinea");
        var ctx = c.getContext("2d");
        ctx.moveTo(0, 0);          // Comienza en la esquina superior izquierda
        ctx.lineTo(400, 200);      // Termina en la esquina inferior derecha
        ctx.strokeStyle = 'red';   // Cambia el color de la línea
        ctx.lineWidth = 5;         // Establece el grosor de la línea
        ctx.stroke();
    </script>


Ejemplo: Dibujar un Círculo


Código del ejemplo 

          <canvas id="canvasCirculo" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasCirculo");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.arc(200, 100, 50, 0, 2 * Math.PI); // (x, y, radio, ángulo de inicio, ángulo de final)
            ctx.fillStyle = 'blue'; // Color de relleno
            ctx.fill(); // Rellena el círculo
            ctx.strokeStyle = 'black'; // Color del borde
            ctx.lineWidth = 2; // Grosor del borde
            ctx.stroke(); // Dibuja el borde
          </script>


Ejemplo: Dibujar un Cuadrado


Código del ejemplo 

          <canvas id="canvasCuadrado" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasCuadrado");
            var ctx = c.getContext("2d");
            ctx.fillStyle = 'green'; // Color de relleno
            ctx.fillRect(150, 75, 100, 100); // (x, y, ancho, alto)
            ctx.strokeStyle = 'black'; // Color del borde
            ctx.lineWidth = 2; // Grosor del borde
            ctx.strokeRect(150, 75, 100, 100); // Dibuja el borde del cuadrado
          </script>


Ejemplo: Dibujar "Hello Mundo"


Código del ejemplo 

          <canvas id="canvasTexto" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasTexto");
            var ctx = c.getContext("2d");
            ctx.font = "30px Arial"; // Define la fuente y el tamaño
            ctx.fillStyle = "purple"; // Color del texto
            ctx.fillText("Hello Mundo", 100, 100); // Dibuja el texto en (x, y)
          </script>


Ejemplo: Dibujar "Hello Mundo" con Contorno


Código del ejemplo 

          <canvas id="canvasTextoContorno" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasTextoContorno");
            var ctx = c.getContext("2d");
            ctx.font = "30px Arial"; // Define la fuente y el tamaño
            ctx.strokeStyle = "blue"; // Color del contorno
            ctx.lineWidth = 2; // Grosor del contorno
            ctx.strokeText("Hello Mundo", 50, 100); // Dibuja el contorno del texto en (x, y)
          </script>


Ejemplo: Degradado Lineal


Código del ejemplo 

          <canvas id="canvasGradient" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasGradient");
            var ctx = c.getContext("2d");
  
            // Crear un degradado lineal
            var gradient = ctx.createLinearGradient(0, 0, 400, 0); // (x0, y0, x1, y1)
            gradient.addColorStop(0, "red");    // Color inicial
            gradient.addColorStop(1, "yellow"); // Color final
  
            // Rellenar el fondo con el degradado
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, c.width, c.height); // Rellenar todo el canvas
  
            // Dibujar el texto encima del degradado
            ctx.font = "30px Arial"; // Define la fuente y el tamaño
            ctx.fillStyle = "blue";   // Color del texto
            ctx.fillText("Hello Mundo", 100, 100); // Dibuja el texto en (x, y)
          </script>


Ejemplo: Degradado Radial


Código del ejemplo 

          <canvas id="canvasRadial" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasRadial");
            var ctx = c.getContext("2d");
  
            // Crear un degradado radial
            var gradient = ctx.createRadialGradient(200, 100, 20, 200, 100, 150); // (x0, y0, r0, x1, y1, r1)
            gradient.addColorStop(0, "blue");   // Color en el centro
            gradient.addColorStop(1, "white");  // Color en el borde
  
            // Rellenar el fondo con el degradado
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, c.width, c.height); // Rellenar todo el canvas
  
            // Dibujar el texto encima del degradado
            ctx.font = "30px Arial"; // Define la fuente y el tamaño
            ctx.fillStyle = "black";  // Color del texto
            ctx.fillText("Hello Mundo", 100, 100); // Dibuja el texto en (x, y)
          </script>


Ejemplo: Dibujar un Sol


Código del ejemplo 

                <canvas id="canvasSol" width="400" height="400" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
                
                <script>
                    var c = document.getElementById("canvasSol");
                    var ctx = c.getContext("2d");

                    // Dibujar el círculo del sol
                    ctx.fillStyle = "yellow";
                    ctx.beginPath();
                    ctx.arc(200, 200, 50, 0, Math.PI * 2); // (x, y, radio, inicio, fin)
                    ctx.fill();
                    ctx.stroke(); // Dibuja el borde del sol

                    // Función para dibujar un rayo puntiagudo
                    function drawPointedRay(x, y, angle) {
                        ctx.beginPath();
                        ctx.moveTo(x, y); // Punto de inicio del rayo
                        ctx.lineTo(x + 60 * Math.cos(angle), y + 60 * Math.sin(angle)); // Rayo puntiagudo
                        ctx.lineWidth = 4; // Grosor del rayo
                        ctx.strokeStyle = "orange"; // Color del rayo
                        ctx.stroke();
                    }

                    // Función para dibujar un rayo curvado
                    function drawCurvedRay(x, y, angle) {
                        ctx.beginPath();
                        ctx.moveTo(x, y); // Punto de inicio del rayo
                        ctx.quadraticCurveTo(
                            x + 30 * Math.cos(angle), 
                            y + 30 * Math.sin(angle), 
                            x + 60 * Math.cos(angle), 
                            y + 60 * Math.sin(angle)
                        ); // Curva
                        ctx.lineWidth = 4; // Grosor del rayo
                        ctx.strokeStyle = "orange"; // Color del rayo
                        ctx.stroke();
                    }

                    // Dibujar los rayos del sol
                    for (var i = 0; i < 12; i++) {
                        var angle = i * (Math.PI / 6); // 12 rayos, 30 grados entre ellos
                        drawPointedRay(200, 200, angle); // Rayos puntiagudos
                        drawCurvedRay(200, 200, angle); // Rayos curvados
                    }
                </script>


5. Efectos de Color

El elemento <canvas> permite crear varios efectos de color utilizando métodos de dibujo de JavaScript. Puedes aplicar colores sólidos, degradados y patrones a las figuras que dibujes en el lienzo. Además, puedes usar el método globalAlpha para cambiar la transparencia de los colores, lo que permite crear efectos visuales interesantes.


Ejemplo: Efectos de Color


Código del ejemplo 

          <canvas id="canvasEfectos" width="400" height="400" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasEfectos");
            var ctx = c.getContext("2d");
  
            // Rellenar un rectángulo con color sólido
            ctx.fillStyle = "blue";
            ctx.fillRect(50, 50, 100, 100);
  
            // Rellenar un rectángulo con degradado
            var gradient = ctx.createLinearGradient(200, 50, 300, 150);
            gradient.addColorStop(0, "red");
            gradient.addColorStop(1, "yellow");
            ctx.fillStyle = gradient;
            ctx.fillRect(200, 50, 100, 100);
  
            // Aplicar transparencia
            ctx.globalAlpha = 0.5; // 50% de transparencia
            ctx.fillStyle = "green";
            ctx.fillRect(50, 200, 100, 100);
            ctx.globalAlpha = 1.0; // Restablecer opacidad a 100%
          </script>


5. Efectos de Color Mejorados

En este ejemplo, se muestran varios efectos de color en el lienzo, incluyendo un degradado radial, un patrón de líneas, y la posibilidad de aplicar transparencia a los colores.


Ejemplo: Efectos de Color Mejorados


Código del ejemplo 

          <canvas id="canvasEfectosMejorados" width="400" height="400" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
          
          <script>
            var c = document.getElementById("canvasEfectosMejorados");
            var ctx = c.getContext("2d");
  
            // Degradado radial
            var radialGradient = ctx.createRadialGradient(200, 200, 20, 200, 200, 200);
            radialGradient.addColorStop(0, "yellow");
            radialGradient.addColorStop(1, "blue");
            ctx.fillStyle = radialGradient;
            ctx.fillRect(0, 0, 400, 400);
  
            // Aplicar un patrón de líneas diagonales
            ctx.strokeStyle = "black";
            ctx.lineWidth = 2;
  
            for (let i = 0; i <= 400; i += 20) {
              ctx.beginPath();
              ctx.moveTo(0, i);
              ctx.lineTo(i, 400);
              ctx.stroke();
            }
  
            // Aplicar transparencia
            ctx.globalAlpha = 0.5; // 50% de transparencia
            ctx.fillStyle = "red";
            ctx.fillRect(50, 50, 100, 100);
            ctx.globalAlpha = 1.0; // Restablecer opacidad a 100%
          </script>


6. Conclusiones y Recursos Adicionales

Conclusiones

A lo largo de esta lección, hemos explorado el elemento <canvas> de HTML, su configuración y cómo utilizar JavaScript para dibujar formas y aplicar efectos de color. El <canvas> es una herramienta poderosa para crear gráficos dinámicos en la web y es compatible con todos los navegadores modernos.

Desde dibujar líneas y círculos hasta crear efectos de color complejos, el lienzo ofrece una amplia gama de posibilidades para los desarrolladores. Con la práctica, puedes utilizar <canvas> para construir aplicaciones visuales interactivas.


Recursos Adicionales



7. Ejercicios Prácticos

Ejercicios Propuestos
  1. Dibuja una Casa: Crea un dibujo simple de una casa utilizando el <canvas>. Utiliza rectángulos y triángulos para representar las paredes y el techo.
  2. Rueda de Color: Crea un gráfico de "rueda de colores" usando círculos de diferentes colores dispuestos en un círculo.
  3. Animación Simple: Implementa una animación simple que muestre un círculo moviéndose de izquierda a derecha en el lienzo.
  4. Recrea un Logo: Intenta recrear un logo simple utilizando formas básicas y texto en el <canvas>.
  5. Juego de Click: Crea un juego simple donde los jugadores deben hacer clic en un objeto que se mueve aleatoriamente en el lienzo.

Intenta realizar estos ejercicios para practicar y mejorar tus habilidades en el uso de <canvas> y JavaScript. ¡Diviértete programando!







Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias