Revelando partes de una imagen al mouseover

Question

¿Cuál es la mejor manera de tener una cosa de tipo "fog of war" donde una imagen está oscurecida, pero luego cuando el usuario pasa sobre la imagen se revela un área alrededor del cursor . Por lo tanto, probablemente una capa diseñada con CSS sobre una imagen, que a medida que el usuario pasa el mouse se vuelve transparente y la imagen se puede ver en un área alrededor del mouse, pero el resto de la imagen aún está oscurecida.

Answer 1

Si lo que desea es utilizar javascript y css para hacer esto:

• Crear una imagen en negro con un agujero transparente en el medio
• Uso algunos javascript para obtener la posición del ratón
• actualización de la css para establecer la posición de la imagen de niebla en el puntero del mouse

Debería asegurarse de que todo esté en capas correctamente para que su imagen esté debajo de la imagen de niebla, y la niebla imag e está debajo del resto del contenido si esto no ocupa toda la ventana del navegador.

Answer 2

En el lienzo, podría hacer que una capa sobre la imagen sea parcialmente transparente, pero el área cercana al cursor será completamente transparente. Las capas realmente no existen en el lienzo, pero hay marcos que le permiten hacer capas.

en HTML/CSS, podría hacer "mosaicos" de la imagen que tienen 2 capas, una imagen debajo y un PNG parcialmente transparente arriba. Al desplazarse, el PNG del mosaico se establece en display:none para revelar la imagen debajo.

Answer 3

He encontrado que esto es una pregunta muy buena, así que para los futuros visitantes Voy a dejar esto como una referencia:

$(window).on('load', function() { 
    var 
    ctx = $('#canvas')[0].getContext('2d'), 
    mouse = {x: -100, y: -100}; 

    // fill black 
    ctx.fillStyle = 'black'; 
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

    // track mouse 
    $('#canvas').on('mousemove.fog', function (evt) { 
    mouse.x = evt.offsetX; 
    mouse.y = evt.offsetY; 
    }); 

    (function animloop(now) { 
    var 
     frame = webkitRequestAnimationFrame(animloop), // use a polyfill here 
     x = mouse.x, 
     y = mouse.y, 
     r = 10, 
     grad = ctx.createRadialGradient(x, y, 0, x, y, r); 

    grad.addColorStop(0, "rgba(0, 0, 0, 255)"); 
    grad.addColorStop(1, "rgba(0, 0, 0, 0)"); 

    ctx.globalCompositeOperation = 'destination-out'; 
    ctx.fillStyle = grad; 
    ctx.arc(x, y, r, 0, 2 * Math.PI, true); 
    ctx.fill(); 
    }(Date.now())); 
});​ 

demo: http://jsfiddle.net/RUc5s/1/