// Helper: draw standard hand (hour/minute) with rounded ends & gradient function drawHand(ctx, cx, cy, angle, length, width, color, shadowIntensity = 0.2) ctx.save(); ctx.shadowBlur = 4; ctx.shadowColor = `rgba(0,0,0,$shadowIntensity)`; ctx.beginPath(); // hand shape: polygon from base to tip const tipX = cx + length * Math.sin(angle); const tipY = cy - length * Math.cos(angle); const backX = cx - length * 0.18 * Math.sin(angle); const backY = cy + length * 0.18 * Math.cos(angle); const perpX = (width / 2) * Math.cos(angle); const perpY = (width / 2) * Math.sin(angle);
// ---- glass reflection effect (tiny highlight) ---- ctx.beginPath(); ctx.ellipse(centerX - 40, centerY - 45, 40, 28, 0.4, 0, 2 * Math.PI); ctx.fillStyle = 'rgba(255, 255, 240, 0.18)'; ctx.fill(); reloj analógico online pantalla completa
// ---- CENTER CAP / AXLE ---- ctx.beginPath(); ctx.arc(centerX, centerY, 14, 0, 2 * Math.PI); ctx.fillStyle = '#cfa668'; ctx.shadowBlur = 2; ctx.fill(); ctx.beginPath(); ctx.arc(centerX, centerY, 7, 0, 2 * Math.PI); ctx.fillStyle = '#e7cfa1'; ctx.fill(); ctx.beginPath(); ctx.arc(centerX, centerY, 3, 0, 2 * Math.PI); ctx.fillStyle = '#5a3e2a'; ctx.fill(); ctx.shadowBlur = 0; // Helper: draw standard hand (hour/minute) with rounded
canvas display: block; width: auto; height: auto; max-width: 95vw; max-height: 85vh; background: radial-gradient(ellipse at 30% 35%, #f9f3e0, #e8dcc0); border-radius: 50%; box-shadow: 0 30px 40px rgba(0, 0, 0, 0.5), 0 0 0 12px rgba(210, 180, 140, 0.6), 0 0 0 18px rgba(100, 70, 40, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease; cursor: pointer; shadowIntensity = 0.2) ctx.save()
// ---- HANDS: HOUR ---- const hourLen = radius * 0.52; const hourWidth = 9; drawHand(ctx, centerX, centerY, hourAngle, hourLen, hourWidth, '#1f2c1c', 0.25);