jquery - カーソルを中心とした半径内で前景イメージを透明にする

Question

ユーザーがオブジェクトに懐中電灯を照らし、懐中電灯のビーム (カーソルの周りの円) 内にあるものはすべて、前景画像ではなく背景画像を表示するという概念を実装する必要があるデザインがあります。

jQuery と HTML5 の手法を使用して理想的に実装する方法についての提案を探しています。Flash でこれを実現できると確信していますが、iOS フレンドリーにしたいと考えています。

Answer 1

マスクを使用する代わりに背景を覆うこのjsfiddleのようなものをお勧めします。基本的な png を使用して懐中電灯をシミュレートしました。もちろん、より良い画像を使用する必要があります

jsfiddle でのパフォーマンスの低下に注意してください。ただし、他の場所でははるかに優れているはずです

更新: jsfiddle リンクを更新してエラーを修正します

Answer 2

2 つの html キャンバスを使用できます。

前景は背景よりも高い z-index を持つキャンバスであり、両方とも position:absolute であり、コンテナー要素に含まれます。

次に、マウスを中心とした円の位置を見つけます (リソースを参照)。

マウス移動イベントを使用し、マウスの位置から円の高さと幅の半分を差し引いて、マウスの中心に配置することで、その位置を取得します。

次に、円と同じ座標を持つキャンバス上のピクセルを操作して、アルファ値を 0 (完全に透明にしたくない場合は 0 から 1 の間の数値) にすることができます。

うまくいけば、それで十分に説明できます。ご不明な点がございましたら、お気軽にお問い合わせください。ただコードを配布するつもりはありませんが、それはこのフォーラムの本当の目的ではないからです。

資力：

基本: http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/

円の座標を取得する: 円の座標を順次計算します

ピクセルの操作: http://tutorials.jenkov.com/html5-canvas/pixels.html