正面/背面按钮两个图像

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框架不容易做的工作为你:)