如何讓鼠標在畫布上形狀

Question

我有一個畫布，用戶可以通過在畫布上繪製形狀來選擇圖片上的東西。所以有可能在畫布上有多個形狀

現在我想要的是當鼠標懸停形狀我想要改變畫布的不透明度，除了自定義形狀（鼠標懸停）。

這就像一些jQuery插件做 http://davidlynch.org/projects/maphilight/docs/demo_simple.html如果我理解你的問題正確，你需要去同一個數據模型的方法來畫布（反向這裏效果）

感謝

Answer 1

反向區效應。基本上，您需要存儲將出現在畫布上的信息。然後，您有一個使用該信息呈現畫布的函數。

當用戶將鼠標移動到畫布上時，您可以確定它們相對於畫布的x，y，查看數據並查看x，y處的內容。改變數據中的狀態並重新構建畫布。

這是一個非常粗略的例子，我很快就把它扔在了一起。我強烈建議更好地構建您的JavaScript，但這是一個概念證明。在實踐中，您將希望以索引格式存儲數據，並更好地執行mousemove（）函數調用，因爲當用戶移動鼠標時（通常使用setTimeout並忽略隨後的調用），該函數會被敲擊。

$(function() { 
    function renderCanvas() { 
     for(var i = 0; i < data.length; i++) {    
      context.fillRect(data[i].x, data[i].y, data[i].width, data[i].height); 
     }   
    } 

    var context = $(".myCanvas").get(0).getContext("2d"); 

    var data = []; 

    data.push({ x : 25, y : 25, height : 100, width : 100 }); 

    renderCanvas(); 

    $(".myCanvas").mousemove(function(e) { 
     for(var i = 0; i < data.length; i++) { 
      if (e.pageX > data[i].x && e.pageX < data[i].x + data[i].width && e.pageY > data[i].y && e.pageY < data[i].y + data[i].height) { 
       data[i].height = 200; 
       renderCanvas(); 
      }       
     } 
    }); 
}); 

在小提琴格式：http://jsfiddle.net/wUnDu/1/