javascript - 两个图像，如前进/后退按钮

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>

如果点击了 ileri.png，我想将“ilerigeri”的值更改为 1。如果点击了geri.png，我想将“ilerigeri”的值更改为2。我可以使用 image.onclick 之类的东西还是需要找到点击点的坐标？

Answer 1

画布元素会自己捕捉点击事件，但你必须自己知道光标下的像素是什么。

请记住，canvas 标签只是一个渲染的地方。本质上，它不是场景图或任何对象结构。

所以至少有2个解决方案：

1. 检测自己单击了哪个按钮。您可以检查光标是否在图像的边界框内。类似的东西：

   if (mousePosition > img.x && mousePosition < (img.x + img.width) && mousePosition>img.y && mousePosition<(img.y+img.height) { // 完成工作 }

2. 使用像cgSceneGraph这样的框架可以轻松地为您完成工作:)

Answer 2

<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/