DEV Community: ToolRapido

Cómo crear una ruleta giratoria con Canvas API en JavaScript

ToolRapido — Sun, 26 Apr 2026 17:02:43 +0000

Una ruleta giratoria parece compleja pero se puede construir con Canvas 2D puro en menos de 200 líneas. En este tutorial explico cada parte del algoritmo.

La estructura básica

<canvas id="wheel" width="400" height="400"></canvas>
<button id="spin">Girar</button>

const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const cx = canvas.width / 2;
const cy = canvas.height / 2;
const radius = cx - 10;

Dibujar los segmentos

Cada segmento es un arco de círculo. Con N elementos, cada segmento ocupa 2π/N radianes.

function drawWheel(items, colors, currentAngle) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const n = items.length;
  const segAngle = (2 * Math.PI) / n;

  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate(currentAngle);

  for (let i = 0; i < n; i++) {
    const start = -Math.PI / 2 + i * segAngle;
    const end = start + segAngle;

    // Segmento
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.arc(0, 0, radius, start, end);
    ctx.closePath();
    ctx.fillStyle = colors[i];
    ctx.fill();
    ctx.strokeStyle = 'rgba(255,255,255,0.7)';
    ctx.lineWidth = 2;
    ctx.stroke();

    // Texto
    ctx.save();
    ctx.rotate(start + segAngle / 2);
    ctx.textAlign = 'right';
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 14px sans-serif';
    ctx.fillText(items[i], radius - 12, 0);
    ctx.restore();
  }

  ctx.restore();
}

El algoritmo de giro con easing

La física del giro tiene tres fases: aceleración, velocidad máxima y desaceleración. La función easeOut simula la fricción.

const SPIN_DURATION = 5500; // ms
const MIN_SPINS = 6;

let animStart = null;
let animStartAngle = 0;
let targetAngle = 0;
let currentAngle = 0;

function easeOut(t) {
  return 1 - Math.pow(1 - t, 4);
}

function animate(timestamp) {
  if (!animStart) animStart = timestamp;

  const elapsed = timestamp - animStart;
  const progress = Math.min(elapsed / SPIN_DURATION, 1);

  currentAngle = animStartAngle + (targetAngle - animStartAngle) * easeOut(progress);
  drawWheel(items, colors, currentAngle);

  if (progress < 1) {
    requestAnimationFrame(animate);
  } else {
    onSpinEnd();
  }
}

Calcular el ganador

El puntero está fijo arriba (en -π/2). Para saber qué segmento apunta arriba al terminar el giro:

function getWinnerIndex(angle, n) {
  const segAngle = (2 * Math.PI) / n;
  const normalized = (((-angle % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI));
  return Math.floor(normalized / segAngle) % n;
}

Calcular el ángulo objetivo

Para garantizar que la ruleta se detiene en un ganador concreto (o aleatorio):

function startSpin(items) {
  const n = items.length;
  const segAngle = (2 * Math.PI) / n;
  const winnerIndex = Math.floor(Math.random() * n);

  // Ángulo donde debe quedar el centro del segmento ganador apuntando arriba
  const f = 0.2 + Math.random() * 0.6; // posición aleatoria dentro del segmento
  const targetMod = 2 * Math.PI - (winnerIndex + f) * segAngle;
  const currentMod = ((currentAngle % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
  const step = (targetMod - currentMod + 2 * Math.PI) % (2 * Math.PI);
  const extraSpins = (MIN_SPINS + Math.floor(Math.random() * 5)) * 2 * Math.PI;

  animStartAngle = currentAngle;
  targetAngle = currentAngle + extraSpins + step;
  animStart = null;

  requestAnimationFrame(animate);
}

El sonido de tick

Usando la Web Audio API puedes añadir el sonido de tick cuando la ruleta pasa por cada segmento, sin archivos de audio externos:

function playTick() {
  const ac = new AudioContext();
  const osc = ac.createOscillator();
  const gain = ac.createGain();

  osc.connect(gain);
  gain.connect(ac.destination);
  osc.frequency.value = 680;
  osc.type = 'triangle';
  gain.gain.setValueAtTime(0.05, ac.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.001, ac.currentTime + 0.07);
  osc.start(ac.currentTime);
  osc.stop(ac.currentTime + 0.07);
}

Ver el resultado final

Si quieres ver una implementación completa y funcional con presets, modo eliminar ganador e historial, puedes probar esta ruleta aleatoria online, construida exactamente con las técnicas de este artículo.

Conclusión

Canvas 2D + requestAnimationFrame son suficientes para una animación fluida
El truco está en calcular el targetAngle correctamente para garantizar el ganador
easeOut con exponente 4 da una desaceleración natural muy convincente
La Web Audio API permite sonido sin archivos externos

Cómo generar contraseñas seguras en JavaScript con la Web Crypto API

ToolRapido — Sun, 26 Apr 2026 17:01:46 +0000

Generar contraseñas seguras no es tan trivial como parece. Math.random() no es criptográficamente seguro. La solución correcta está en la Web Crypto API, disponible en todos los navegadores modernos.

El problema con Math.random()

// MAL — no usar para contraseñas
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const password = Array.from({ length: 16 }, () =>
  chars[Math.floor(Math.random() * chars.length)]
).join('');

Math.random() usa un generador pseudoaleatorio predecible. No sirve para seguridad.

La solución correcta: crypto.getRandomValues()

function generatePassword(length = 16, options = {}) {
  const {
    uppercase = true,
    lowercase = true,
    numbers = true,
    symbols = false,
  } = options;

  let charset = '';
  if (uppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  if (lowercase) charset += 'abcdefghijklmnopqrstuvwxyz';
  if (numbers)   charset += '0123456789';
  if (symbols)   charset += '!@#$%^&*()_+-=[]{}|;:,.<>?';

  if (!charset) throw new Error('Al menos un tipo de caracter requerido');

  const array = new Uint32Array(length);
  crypto.getRandomValues(array);

  return Array.from(array, (n) => charset[n % charset.length]).join('');
}

Por qué funciona

crypto.getRandomValues() usa la fuente de entropía del sistema operativo (equivalente a /dev/urandom en Linux). Los valores son impredecibles incluso conociendo los anteriores.

El truco del módulo (n % charset.length) introduce un pequeño sesgo si el tamaño del charset no divide exactamente a 2^32. Para longitudes de charset típicas (62-95 caracteres) el sesgo es despreciable, pero si quieres eliminarlo del todo:

function unbiasedRandom(max, array, index) {
  const limit = Math.floor(0xFFFFFFFF / max) * max;
  if (array[index] > limit) return null; // descartar
  return array[index] % max;
}

Calcular la entropía

function entropy(length, charsetSize) {
  return length * Math.log2(charsetSize);
}

entropy(16, 62);  // 95.3 bits — muy seguro
entropy(12, 62);  // 71.5 bits — aceptable
entropy(8, 62);   // 47.6 bits — débil

A partir de 80 bits de entropía una contraseña es prácticamente infuerectable con hardware actual.

Comprobar la fortaleza

function strength(password) {
  let charset = 0;
  if (/[a-z]/.test(password)) charset += 26;
  if (/[A-Z]/.test(password)) charset += 26;
  if (/[0-9]/.test(password)) charset += 10;
  if (/[^a-zA-Z0-9]/.test(password)) charset += 32;

  const bits = password.length * Math.log2(charset);
  if (bits < 50) return 'débil';
  if (bits < 80) return 'media';
  return 'fuerte';
}

Herramienta lista para usar

Si prefieres no implementarlo y solo necesitas generar contraseñas seguras rápidamente, puedes usar este generador de contraseñas gratuito que funciona íntegramente en el navegador, sin enviar nada a ningún servidor.

Conclusión

Usa siempre crypto.getRandomValues(), nunca Math.random()
16 caracteres con mayúsculas, minúsculas y números dan más de 95 bits de entropía
La Web Crypto API está disponible en todos los navegadores modernos sin instalar nada

Cómo validar NIF, CIF y NIE en JavaScript: el algoritmo explicado

ToolRapido — Sun, 26 Apr 2026 16:46:54 +0000

Si desarrollas software para el mercado español, tarde o temprano necesitas validar documentos fiscales: NIF, CIF o NIE. Aquí explico cómo funciona el algoritmo oficial y cómo implementarlo.

El algoritmo del NIF (y DNI)

El NIF de persona física son 8 dígitos + 1 letra de control. La letra se calcula así:

Toma los 8 dígitos
Divide entre 23
El resto (0-22) selecciona una letra de esta cadena: TRWAGMYFPDXBNJZSQVHLCKE

function validateNIF(nif) {
  const letters = 'TRWAGMYFPDXBNJZSQVHLCKE';
  const cleaned = nif.toUpperCase().trim();
  const num = parseInt(cleaned.slice(0, 8), 10);
  const letter = cleaned.slice(-1);
  return letters[num % 23] === letter;
}

El algoritmo del NIE

El NIE empieza por X, Y o Z. Se sustituye por 0, 1 o 2 respectivamente, y se aplica el mismo algoritmo que el NIF.

function validateNIE(nie) {
  const letters = 'TRWAGMYFPDXBNJZSQVHLCKE';
  const cleaned = nie.toUpperCase().trim();
  const first = { X: '0', Y: '1', Z: '2' }[cleaned[0]];
  if (!first) return false;
  const num = parseInt(first + cleaned.slice(1, 8), 10);
  return letters[num % 23] === cleaned.slice(-1);
}

El algoritmo del CIF (empresas)

El CIF es más complejo: letra de tipo + 7 dígitos + carácter de control.

function validateCIF(cif) {
  const cleaned = cif.toUpperCase().trim();
  const validLetters = 'ABCDEFGHJKLMNPQRSUVW';
  if (!validLetters.includes(cleaned[0])) return false;

  const digits = cleaned.slice(1, 8);
  let oddSum = 0, evenSum = 0;

  for (let i = 0; i < 7; i++) {
    const d = parseInt(digits[i], 10);
    if (i % 2 === 0) {
      const doubled = d * 2;
      oddSum += doubled > 9 ? doubled - 9 : doubled;
    } else {
      evenSum += d;
    }
  }

  const total = oddSum + evenSum;
  const control = (10 - (total % 10)) % 10;
  const lastChar = cleaned.slice(-1);
  const controlLetters = 'JABCDEFGHI';

  return lastChar === String(control) || lastChar === controlLetters[control];
}

Casos de uso habituales

Tests automatizados: generar datos válidos para Jest, Vitest, Cypress
Seeding de bases de datos: poblar entornos de desarrollo sin usar datos reales
Validación de formularios: verificar que el campo NIF funciona en producción

Si no quieres implementarlo tú mismo, hay herramientas online que validan y generan NIF, CIF y NIE aleatorios válidos para pruebas, como este validador y generador gratuito.

Conclusión

El algoritmo es sencillo pero tiene sus matices, especialmente en el CIF. Implementarlo bien y testearlo te ahorra sorpresas en producción con datos reales.