From fca6c9a0cff472b39cfcd91a7e3d04bd380ea9d6 Mon Sep 17 00:00:00 2001
From: Christian Julian Jimenez <zs22016079@estudiantes.uv.mx>
Date: Wed, 12 Feb 2025 08:41:21 -0600
Subject: [PATCH] =?UTF-8?q?Se=20agreg=C3=B3=20la=20funcionalidad=20del=20c?=
=?UTF-8?q?ambio=20de=20color=20de=20car=C3=A1cteres?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 17 ++++++++++-------
1 file changed, 10 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index d33f75e..6db47b9 100644
--- a/index.html
+++ b/index.html
@@ -34,13 +34,14 @@
<input type="color" value="#000000" id="colorPicker">
<canvas id="lienzoCuadriculado" width="500" height="500"></canvas>
<script>
+ const colorPicker = document.getElementById("colorPicker");
const lienzo = document.getElementById("lienzoCuadriculado");
const contexto = lienzo.getContext("2d");
const tamanoCuadricula = 20; // Tamaño de cada celda en píxeles
let dibujando = false;
const seleccionAscii = document.getElementById("seleccionAscii");
- // Mapa para almacenar los caracteres dibujados
+ // Mapa para almacenar los caracteres y sus colores
const caracteresEnPosiciones = new Map();
function dibujarCuadricula() {
@@ -65,23 +66,25 @@
function dibujarAscii(x, y) {
const ascii = seleccionAscii.value;
+ const color = colorPicker.value;
const posicionClave = `${x},${y}`;
- const caracterActual = caracteresEnPosiciones.get(posicionClave);
+ const caracterInfo = caracteresEnPosiciones.get(posicionClave);
- // Solo dibuja si la celda está vacía o si el carácter es diferente
- if (!caracterActual || caracterActual !== ascii) {
+ // Solo dibuja si la celda está vacía o si el carácter o color es diferente
+ if (!caracterInfo || caracterInfo.ascii !== ascii || caracterInfo.color !== color) {
// Limpia la celda antes de dibujar
contexto.clearRect(x, y, tamanoCuadricula, tamanoCuadricula);
// Redibuja la línea de la cuadrícula para esa celda
contexto.strokeStyle = "#ddd";
contexto.strokeRect(x, y, tamanoCuadricula, tamanoCuadricula);
- // Dibuja el nuevo carácter
+ // Dibuja el nuevo carácter con el color seleccionado
contexto.font = `${tamanoCuadricula}px monospace`;
+ contexto.fillStyle = color;
contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
- // Almacena el nuevo carácter en el mapa
- caracteresEnPosiciones.set(posicionClave, ascii);
+ // Almacena el nuevo carácter y su color en el mapa
+ caracteresEnPosiciones.set(posicionClave, { ascii, color });
}
}