56-resolucion ejercicios

---

Ejercicio 1: Dibujo de una Casa

En este ejercicio, aprenderemos a utilizar el elemento <canvas> para crear un dibujo básico de una casa. Usaremos rectángulos para las paredes y la puerta, y un triángulo para el techo. Este ejemplo nos ayudará a comprender el uso de las coordenadas y cómo controlar los estilos, colores y formas en el contexto de dibujo.

Ejemplo: Dibujo de una Casa

Código del ejemplo

                            <canvas id="canvasCasa" width="400" height="300" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
                            
                            <script>
                                var c = document.getElementById("canvasCasa");
                                var ctx = c.getContext("2d");
            
                                // Dibujar las paredes de la casa
                                ctx.fillStyle = "#8B4513"; // Color marrón para las paredes
                                ctx.fillRect(100, 150, 200, 100); // (x, y, ancho, alto)
            
                                // Dibujar el techo como un triángulo
                                ctx.beginPath();
                                ctx.moveTo(100, 150); // Punto izquierdo del techo
                                ctx.lineTo(300, 150); // Punto derecho del techo
                                ctx.lineTo(200, 80); // Pico superior del techo
                                ctx.closePath();
                                ctx.fillStyle = "#A52A2A"; // Color rojo oscuro para el techo
                                ctx.fill();
            
                                // Dibujar la puerta
                                ctx.fillStyle = "#654321"; // Color marrón oscuro para la puerta
                                ctx.fillRect(180, 200, 40, 50); // (x, y, ancho, alto)
                                
                                // Dibujar una ventana
                                ctx.fillStyle = "#87CEEB"; // Color azul claro para la ventana
                                ctx.fillRect(120, 170, 30, 30); // Ventana izquierda
                                ctx.fillRect(250, 170, 30, 30); // Ventana derecha
                            </script>
                        

---

...

Ejercicio 2: Rueda de Color

En este ejercicio, aprenderemos a crear una rueda de colores utilizando el elemento <canvas>. Dibujaremos varios círculos de diferentes colores distribuidos en forma de círculo para simular una rueda de color. Este ejercicio nos permite practicar el uso de arcos y colores en el contexto de dibujo.

Ejemplo: Rueda de Color

Código del ejemplo

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

                    // Colores para la rueda
                    var colores = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
                    var centroX = 200, centroY = 200; // Centro del canvas
                    var radio = 100; // Radio de la rueda
                    var radioCirculos = 20; // Radio de cada círculo

                    // Dibujar los círculos en forma de rueda de color
                    colores.forEach(function(color, index) {
                        var angulo = index * (2 * Math.PI / colores.length); // Ángulo para cada color
                        var x = centroX + radio * Math.cos(angulo);
                        var y = centroY + radio * Math.sin(angulo);

                        ctx.beginPath();
                        ctx.arc(x, y, radioCirculos, 0, 2 * Math.PI); // Círculo de color
                        ctx.fillStyle = color;
                        ctx.fill();
                    });
                </script>
            

---

Ejercicio 3: Animación Simple

En este ejercicio, aprenderemos a crear una animación básica en el elemento <canvas>. El objetivo es hacer que un círculo se mueva de izquierda a derecha. Para ello, usaremos un bucle de animación con la función requestAnimationFrame, que permite actualizar la posición del círculo en cada fotograma para crear el efecto de movimiento.

Ejemplo: Animación de un Círculo en Movimiento

Código del ejemplo

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

            <script>
                var canvasAnimacion = document.getElementById("canvasAnimacion");
                var ctxAnimacion = canvasAnimacion.getContext("2d");
                var x = 0; // Posición inicial en el eje x
                var y = canvasAnimacion.height / 2; // Centrar en el eje y
                var radio = 20; // Radio del círculo
                var velocidad = 2; // Velocidad de movimiento

                function animarCirculo() {
                    ctxAnimacion.clearRect(0, 0, canvasAnimacion.width, canvasAnimacion.height); // Limpiar el canvas

                    // Dibujar el círculo en la nueva posición
                    ctxAnimacion.beginPath();
                    ctxAnimacion.arc(x, y, radio, 0, Math.PI * 2);
                    ctxAnimacion.fillStyle = "blue";
                    ctxAnimacion.fill();
                    ctxAnimacion.closePath();

                    // Actualizar la posición en el eje x
                    x += velocidad;

                    // Resetear la posición si el círculo sale del canvas
                    if (x - radio > canvasAnimacion.width) {
                        x = -radio;
                    }

                    // Solicitar el siguiente fotograma de animación
                    requestAnimationFrame(animarCirculo);
                }

                // Iniciar la animación
                animarCirculo();
            </script>
            

---

Ejercicio 4: Recrea un Logo

En este ejercicio, diseñaremos un logo estático para "frioyelectronica.blogspot.com" utilizando el <canvas>. Usaremos un estilo que represente el tema de "frío" y "electrónica" usando formas y texto simples.

Ejemplo: Logo para "Frío Electrónica"

Código del ejemplo

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

            <script>
                var c = document.getElementById("canvasLogoFrioElectronica");
                var ctx = c.getContext("2d");

                // Fondo del logo
                ctx.fillStyle = "#87CEEB"; // Azul claro para dar sensación de frío
                ctx.fillRect(0, 0, 400, 300);

                // Ícono de rayo para representar "electrónica"
                ctx.beginPath();
                ctx.lineTo(210, 80);
                ctx.lineTo(170, 160);
                ctx.lineTo(230, 100);
                ctx.lineTo(210, 160);
                ctx.lineTo(220, 160);
                ctx.closePath();
                ctx.fillStyle = "#FFD700"; // Amarillo brillante
                ctx.fill();

                // Agregar texto
                ctx.fillStyle = '#ffffff'; // Color del texto
                ctx.font = '24px Arial'; // Tipo de fuente y tamaño
                ctx.textAlign = 'center'; // Alinear texto al centro
                ctx.fillText('Frío Electrónica', 200, 250); // Coordenadas para centrar
            </script>
            

---

Ejercicio 5: Juego de Click

En este ejercicio, crearemos un juego simple donde el objetivo es hacer clic en un objeto que se mueve aleatoriamente en el canvas. Usaremos eventos de clic para detectar cuándo el jugador hace clic en el objeto, así como funciones para mover el objeto a nuevas posiciones aleatorias en el canvas. El jugador ganará puntos cada vez que haga clic en el objeto.

Ejemplo: Juego de Click

Puntos: 0

Código del ejemplo

            <canvas id="canvasJuegoClick" width="400" height="300" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
            <div id="puntos" style="margin-top: 10px; font-size: 20px; font-weight: bold;">Puntos: 0</div>

            <script>
                var canvasJuegoClick = document.getElementById("canvasJuegoClick");
                var ctxJuegoClick = canvasJuegoClick.getContext("2d");
                var radio = 20; // Radio del objeto
                var puntos = 0; // Puntos del jugador

                // Función para dibujar el objeto en una posición aleatoria
                function dibujarObjeto() {
                    // Generar posición aleatoria dentro del canvas
                    var x = Math.random() * (canvasJuegoClick.width - radio * 2) + radio;
                    var y = Math.random() * (canvasJuegoClick.height - radio * 2) + radio;

                    // Limpiar el canvas
                    ctxJuegoClick.clearRect(0, 0, canvasJuegoClick.width, canvasJuegoClick.height);
                    
                    // Dibujar el objeto
                    ctxJuegoClick.beginPath();
                    ctxJuegoClick.arc(x, y, radio, 0, Math.PI * 2);
                    ctxJuegoClick.fillStyle = "red";
                    ctxJuegoClick.fill();
                    ctxJuegoClick.closePath();

                    // Retornar las coordenadas para el manejo del clic
                    return { x: x, y: y };
                }

                // Guardar la posición del objeto
                var objetoPos = dibujarObjeto();

                // Evento de clic en el canvas
                canvasJuegoClick.addEventListener("click", function(event) {
                    var rect = canvasJuegoClick.getBoundingClientRect();
                    var mouseX = event.clientX - rect.left;
                    var mouseY = event.clientY - rect.top;

                    // Verificar si el clic está dentro del objeto
                    var distancia = Math.sqrt(Math.pow(mouseX - objetoPos.x, 2) + Math.pow(mouseY - objetoPos.y, 2));
                    if (distancia < radio) {
                        puntos++; // Incrementar puntos
                        document.getElementById("puntos").innerText = "Puntos: " + puntos; // Actualizar puntos
                        objetoPos = dibujarObjeto(); // Mover el objeto
                    }
                });
            </script>
            

---

Ir al índice

---

---