christian.julian
/
ASCII_Proyecto
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Se agregó la funcionalidad del cambio de color de carácteres

This commit is contained in:
Christian Julian Jimenez 2025-02-12 08:41:21 -06:00
parent 07a53bbe37
commit fca6c9a0cf
1 changed files with 10 additions and 7 deletions

17
index.html
View File

@ -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 });
}
}