正面/背面按鈕兩個圖像

Question

我在畫布上有兩個圖像（向前箭頭和向後箭頭）。

<script>  
var ileri = new Image(); 
var geri = new Image(); 
ileri.src= "ileri.png"; 
geri.src = "geri.png"; 
var ilerigeri = 0; 

GetFeedback = function(a){ 
context.drawImage(ileri,50,330); 
context.drawImage(geri,300,330); 
} 

</script> 

....

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

我想改變的 「ilerigeri」 的值設爲1，如果ileri.png點擊。 如果點擊geri.png，我想將「ilerigeri」的值更改爲2。我可以使用像image.onclick之類的東西，還是需要找到點擊的座標？

Answer 1

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

JS：

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var ileri = new Image(); 
var geri = new Image(); 
ileri.src = "ileri.png"; 
geri.src = "geri.png"; 
ileri.onload = function() { 
    context.drawImage(ileri,50,330); 
} 

geri.onload = function() { 
    context.drawImage(geri,300,330); 
} 



canvas.onclick = function(e) { 
    if(e.pageX >= (this.offsetLeft + 50) && e.pageY >= (this.offsetTop + 330)){ 
     if(e.pageX <= (this.offsetLeft + 50 + ileri.width) && e.pageY <= (this.offsetTop + 330 + ileri.height)){ 
      alert('ileri'); 
     } 
    } 
    if(e.pageX >= (this.offsetLeft + 300) && e.pageY >= (this.offsetTop + 330)){ 
     if(e.pageX <= (this.offsetLeft + 300 + geri.width) && e.pageY <= (this.offsetTop + 330 + geri.height)){ 
      alert('geri'); 
     } 
    }  
    } 

這裏工作例如， http://jsfiddle.net/wcxc2/6/

Answer 2

canvas元素將爲自己捕獲click事件，但您必須知道自己在光標下的像素。

請記住，canvas標籤只是一個渲染的地方。本質上，它不是一個場景圖或任何對象結構。

所以2個方案，至少：

1. 檢測自己被點擊了哪個按鈕。您可以檢查光標是否位於圖像的邊界框內。類似的東西：

   如果（mousePosition> img.x & & mousePosition <（img.x + img.width）& & mousePosition> img.y & & mousePosition <（img.y + img.height）{ //做工作 }

2. 使用像cgSceneGraph框架不容易做的工作爲你:)