javascript - マウスオーバーで画像の一部を表示する

Question

画像が黒く塗りつぶされた「戦争の霧」タイプのものを作成するための最良の方法は何ですか。ただし、ユーザーが画像の上にマウスを移動すると、カーソルの周囲の領域が表示されます。そのため、おそらく画像の上に CSS でスタイル設定されたレイヤーがあり、ユーザーがマウスをその上に置くと透明になり、画像はマウスの周囲の領域に表示されますが、画像の残りの部分はまだ黒く塗りつぶされています。

Answer 1

これを行うためにjavascriptとcssを使用したいだけの場合：

• 中央に透明な穴がある黒い画像を作成します
• いくつかのjavascriptを使用してマウスの位置を取得します
• cssを更新して、フォグ画像の位置をマウスポインタに設定します

画像がフォグ画像の下にあり、ブラウザウィンドウ全体を占めていない場合は、フォグ画像が残りのコンテンツの下にあるように、すべてが正しくレイヤー化されていることを確認する必要があります。

Answer 2

これは非常に良い質問であることがわかったので、将来の訪問者のために、これを参照として残しておきます。

$(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()));
});​

デモ： http： //jsfiddle.net/RUc5s/1/