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
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>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias