122 lines
4.4 KiB
HTML
122 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<select id="seleccionAscii">
|
|
<option value="*">*</option>
|
|
<option value="#">#</option>
|
|
<option value="@">@</option>
|
|
<option value="&">&</option>
|
|
<option value="%">%</option>
|
|
</select>
|
|
<button id="botonLimpiar">Limpiar</button>
|
|
<input type="color" value="#000000" id="colorPicker">
|
|
<canvas id="lienzoCuadriculado" width="500" height="500">
|
|
Tu navegador no admite el elemento <canvas>.
|
|
</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>
|
|
</body>
|
|
</html> |