0

キャンバスに 2 つの画像 (進む矢印と戻る矢印) があります。

<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 のようなものを使用できますか、またはクリックしたポイントの座標を見つける必要がありますか?

4

2 に答える 2

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

于 2013-03-04T15:13:09.553 に答える
0

canvas 要素は自分でクリック イベントをキャッチしますが、カーソルの下にあるピクセルを自分で知る必要があります。

canvas タグはレンダリングする場所にすぎないことに注意してください。本来、これはシーン グラフやオブジェクト構造ではありません。

したがって、少なくとも2つのソリューション：

  1. どのボタンがクリックされたかを自分で検出します。カーソルが画像の境界ボックス内にあるかどうかを確認できます。そんな感じ ：

    if (mousePosition > img.x && mousePosition < (img.x + img.width) && mousePosition>img.y && mousePosition<(img.y+img.height) { // 作業を行う }

  2. cgSceneGraphのようなフレームワークを使用すると、簡単に作業を行うことができます :)

于 2013-03-04T14:55:31.353 に答える