0

canvas要素はWebページのコンテンツの前に配置されますが、上部に表示されます。

<canvas id="cnv"></canvas>
<div id="content">
    blah blah
    <p>
         blahs
    </p>
</div>

z-index1つの解決策は、canvasに対して-1に設定することですが、それはmousemoveトリガーされなくなります。

なぜキャンバスが上にあるのですか？マウス移動をトリガーできる状態でコンテンツの背後に配置するにはどうすればよいですか？

http://jsfiddle.net/YUx82/

注：変更できるCSSは、キャンバス用のCSSのみです。
別の解決策は、z-indexを-1に設定してから、何らかの方法でドキュメントからキャンバスにマウスムーブを渡すことです。

4

1 に答える 1

1

それを試してください：

$("#cnv").on("transferMouseCoordinates", function(e, x, y){
  // voila!
});

$(document).on("mousemove", function(e) {
  // use e.pageX and e.pageY to get mouse position
  $("#cnv").trigger("transferMouseCoordinates", e.pageX, e.pageY);
});
于 2013-02-07T17:33:06.513 に答える