作爲一個按鈕的圖像

我想要一個圖像，我添加到畫布中作爲一個按鈕。當我點擊圖片時，必須顯示警告。還必須禁止點擊畫布的其餘部分。我怎樣才能做到這一點？謝謝。作爲一個按鈕的圖像

<script> 
window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var quizbg = new Image(); 
    quizbg.src = "basla.png"; 
    context.drawImage(quizbg,0,0); 
} 

<script> 

<body> 
<div id="ccontainer"> 
<canvas id="myCanvas" width="600" height="400"></canvas> 
</div> 
</body>

來源

2013-03-01 user1942359

不喜歡這樣，

<script> 
    window.onload = function(){ 
      var canvas = document.getElementById("myCanvas"); 
     var context = canvas.getContext("2d"); 
     var quizbg = new Image(); 
     quizbg.src = "basla.png"; 
     quizbg.onload = function() { 
      context.drawImage(quizbg,0,0); 
     } 
     canvas.onclick= function() { 
      alert('Bike'); 
      canvas.onclick = false; 
     } 
    } 
    </script> 



    <body> 
    <div id="ccontainer"> 
    <canvas id="myCanvas" width="600" height="400"></canvas> 
    </div> 
    </body>

工作示例，http://jsfiddle.net/wcxc2/

來源

2013-03-01 13:00:06 MJQ

的邏輯太感謝你了 – user1942359 2013-03-01 13:11:41

這個工作。我也有一個問題。此代碼必須只能工作一次。然後圖像及其事件將被隱藏。我如何提供此功能？ – user1942359 2013-03-01 13:26:18

更新！ – MJQ 2013-03-01 13:42:09

看看kineticjs教程（您想更加容易的）

來源

2013-03-01 12:52:50 karaxuna

你必須寫所有的邏輯由你自己。

1）使用

canvas.addEventListener("click", function(e) { 
    e.pageX, e.pageY; 
});

綁定鼠標

2）檢查，如果點擊一個按鈕

if(inRect(e.pageX, e.pageY, buttonX, buttonY, buttonWidth, buttonHeight)) { 
    alert("the button has been clicked"); 
}

當然，你必須寫inRect功能的矩形內：）

另一件事是，如果你的畫布不是[0，0]，你將不得不減去我從事件的位置抵消。

下面是使用canvasquery http://cssdeck.com/labs/svleh8dq

來源

2013-03-01 13:20:25 rezoner

我可以在同一個腳本中使用兩種不同的點擊功能嗎？ – user1942359 2013-03-04 13:13:07

當然 - .addEventListener可以根據需要綁定儘可能多的不同功能 – rezoner 2013-03-04 17:37:18

作爲一個按鈕的圖像

回答

相關問題