使前景圖像在光標周圍的半徑內透明

Question

我們有一個設計，我們需要實現的概念是用戶將閃光燈照射在物體上，手電筒中的任何物體（光標周圍的圓）應該顯示背景圖像而不是前景圖像。

我正在尋找關於如何理想地使用jQuery和HTML5技術實現的建議。我很確定我們可以通過Flash實現這一點，但我們希望它對iOS友好。

Answer 1

你可以使用兩個html畫布。

前景將是一個具有比背景更高的z-index的畫布，並且它們都將位於：絕對位置並被容器元素包含。

然後你會發現周圍的鼠標爲中心的圓的位置（請參閱參考資料）

你會得到它的位置，用鼠標移動事件並減去高度和圓的一半寬度從位置鼠標圍繞鼠標居中。

然後，您可以操縱畫布上具有與圓相同座標的像素以獲得α值爲0（或者如果您不希望它完全透明，則爲介於0和1之間的數字）

希望這可以充分解釋它。隨意問任何問題。我不會僅僅發佈代碼，因爲這不是真正的論壇。

資源：

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

得到一個圓的座標： Calculate circle coordinates in a sequential fashion

操縱像素： http://tutorials.jenkov.com/html5-canvas/pixels.html

Answer 2

我會建議這樣的jsfiddle這樣的地方，而不是使用蒙版覆蓋背景。我用了一個基本的PNG來模擬你的手電筒，你應該使用更好的圖像上的jsfiddle偏離航向

謹防表現低迷，但應該是更好的其他地方

更新：更新的jsfiddle鏈接來修復錯誤