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元素将为自己捕获click事件，但您必须自己知道光标下的像素。

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

至少2个解决方案：

检测自己点击了哪个按钮。您可以检查光标是否在图像的边界框内。这样的事情：

if（mousePosition＆gt; img.x＆amp;＆amp; mousePosition＆lt;（img.x + img.width）＆amp;＆amp; mousePosition＆gt; img.y＆amp;＆amp; mousePosition＆lt;（img.y + img.height ）{ //做的工作 }
使用类似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/

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

2 个答案: