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

Se moduló el programa en index.html, script,js y estilos.css

This commit is contained in:
Christian Julian Jimenez 2025-02-16 23:32:42 -06:00
parent b17d5ce2f4
commit c7b48c7438
3 changed files with 100 additions and 100 deletions

16
estilos.css Normal file
View File

@ -0,0 +1,16 @@
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
flex-direction: column;
}
canvas {
border: 1px solid black;
background-color: white;
cursor: crosshair;
}
select {
margin-bottom: 10px;
}

104
index.html
View File

@ -4,24 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Cuadriculado con Pincel ASCII</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
flex-direction: column;
}
canvas {
border: 1px solid black;
background-color: white;
cursor: crosshair;
}
select {
margin-bottom: 10px;
}
</style>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<select id="seleccionAscii">
@ -32,91 +15,12 @@
<option value="%">%</option>
</select>
<button id="botonLimpiar">Limpiar</button>
<br>
<input type="color" value="#000000" id="colorPicker">
<br>
<canvas id="lienzoCuadriculado" width="500" height="500">
Tu navegador no admite el elemento &lt;canvas&gt;.
</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 y sus colores
const caracteresEnPosiciones = new Map();
function dibujarCuadricula() {
contexto.strokeStyle = "#ddd";
for (let x = 0; x <= lienzo.width; x += tamanoCuadricula) {
contexto.beginPath();
contexto.moveTo(x, 0);
contexto.lineTo(x, lienzo.height);
contexto.stroke();
}
for (let y = 0; y <= lienzo.height; y += tamanoCuadricula) {
contexto.beginPath();
contexto.moveTo(0, y);
contexto.lineTo(lienzo.width, y);
contexto.stroke();
}
}
function obtenerPosicionAjustada(posicion) {
return Math.floor(posicion / tamanoCuadricula) * tamanoCuadricula;
}
function dibujarAscii(x, y) {
const ascii = seleccionAscii.value;
const color = colorPicker.value;
const posicionClave = `${x},${y}`;
const caracterInfo = caracteresEnPosiciones.get(posicionClave);
// 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 con el color seleccionado
contexto.font = `${tamanoCuadricula}px monospace`;
contexto.fillStyle = color;
contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
// Almacena el nuevo carácter y su color en el mapa
caracteresEnPosiciones.set(posicionClave, { ascii, color });
}
}
botonLimpiar.addEventListener("click", () => {
contexto.clearRect(0, 0, lienzo.width, lienzo.height);
caracteresEnPosiciones.clear();
dibujarCuadricula();
});
lienzo.addEventListener("mousedown", (evento) => {
dibujando = true;
const x = obtenerPosicionAjustada(evento.offsetX);
const y = obtenerPosicionAjustada(evento.offsetY);
dibujarAscii(x, y);
});
lienzo.addEventListener("mousemove", (evento) => {
if (dibujando) {
const x = obtenerPosicionAjustada(evento.offsetX);
const y = obtenerPosicionAjustada(evento.offsetY);
dibujarAscii(x, y);
}
});
lienzo.addEventListener("mouseup", () => {
dibujando = false;
});
dibujarCuadricula();
</script>
<script src="script.js"></script>
</body>
</html>

80
script.js Normal file
View File

@ -0,0 +1,80 @@
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 y sus colores
const caracteresEnPosiciones = new Map();
function dibujarCuadricula() {
contexto.strokeStyle = "#ddd";
for (let x = 0; x <= lienzo.width; x += tamanoCuadricula) {
contexto.beginPath();
contexto.moveTo(x, 0);
contexto.lineTo(x, lienzo.height);
contexto.stroke();
}
for (let y = 0; y <= lienzo.height; y += tamanoCuadricula) {
contexto.beginPath();
contexto.moveTo(0, y);
contexto.lineTo(lienzo.width, y);
contexto.stroke();
}
}
function obtenerPosicionAjustada(posicion) {
return Math.floor(posicion / tamanoCuadricula) * tamanoCuadricula;
}
function dibujarAscii(x, y) {
const ascii = seleccionAscii.value;
const color = colorPicker.value;
const posicionClave = `${x},${y}`;
const caracterInfo = caracteresEnPosiciones.get(posicionClave);
// 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 con el color seleccionado
contexto.font = `${tamanoCuadricula}px monospace`;
contexto.fillStyle = color;
contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
// Almacena el nuevo carácter y su color en el mapa
caracteresEnPosiciones.set(posicionClave, { ascii, color });
}
}
botonLimpiar.addEventListener("click", () => {
contexto.clearRect(0, 0, lienzo.width, lienzo.height);
caracteresEnPosiciones.clear();
dibujarCuadricula();
});
lienzo.addEventListener("mousedown", (evento) => {
dibujando = true;
const x = obtenerPosicionAjustada(evento.offsetX);
const y = obtenerPosicionAjustada(evento.offsetY);
dibujarAscii(x, y);
});
lienzo.addEventListener("mousemove", (evento) => {
if (dibujando) {
const x = obtenerPosicionAjustada(evento.offsetX);
const y = obtenerPosicionAjustada(evento.offsetY);
dibujarAscii(x, y);
}
});
lienzo.addEventListener("mouseup", () => {
dibujando = false;
});
dibujarCuadricula();