0

イベントリスナーを写真に追加しようとしているので、クリックすると別のページに移動します。現時点では、次のページに移動しますが、写真をクリックしたときではなく、キャンバス上の任意の場所をクリックしたときに移動します。

4

2 に答える 2

1

これを簡単に行うことはできません。また、それを可能にするイベントリスナーはありません。

1）キャンバスのクリックを聞きます
2）描画した画像オブジェクトへの参照を保持します... ...のように、別のオブジェクトで参照を保持することにより、キャンバスの座標を確認します。

var canvas_img = {
    x : 250,
    y : 300,
    data   : my_img, 
    width  : my_img.width,
    height : my_img.height
};

3）キャンバスのクリック時に、キャンバス上でクリックが発生した場所と画像がキャンバス上にある場所との間で衝突が発生したかどうかを手動で計算します。

于 2013-03-13T17:17:44.210 に答える
1

キャンバスクリックイベントへの応答

おっと、あなたの質問は途絶えたようです！次の質問では、必ず「Enter」キーを押さないでください。質問の新しい行を開始する代わりに、部分的に書かれた質問をすぐに投稿します（心配しないでください...すべて完了しました）。

そしてニック、「stackoverflowへようこそ」–それは本当に答えでいっぱいです！

Norguardは、クリックした画像をキャンバスが追跡できないことについて正しいです。キャンバスをアーティストのイーゼルと考えてください。あなたはそのイーゼルに画像を描いています。はい、イーゼルには画像が含まれていますが、イーゼルには画像をどこに描いたかを知る方法がありません。

学習中の生活をシンプルに保つために、キャンバスごとに1つの画像だけを使用することから始めてみてください（はい、画像と同じ数のキャンバス要素を使用できます）。

キャンバスごとに1つの画像から始めたい場合は、コードとフィドルを次に示します。http: //jsfiddle.net/m1erickson/KGKYg/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=function(){
      canvas.width=img.width;
      canvas.height=img.height;
      ctx.drawImage(img,0,0);
    }
    img.src="http://dl.dropbox.com/u/139992952/coffee.png";

    canvas.addEventListener("click", function (e) { alert("use your linke totake me away...!"); }); 

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

[編集：キーボードイベントへの応答]

ユーザーのキー押下をリッスンして応答する方法は次のとおりです。

// listen for keyboard events
window.addEventListener('keydown',keyIsDown,true);

// process the keystrokes
function keyIsDown(event){

    switch (event.keyCode) {
        case 38:
            // "UP" was pressed, do UP stuff
            break;
        case 40:
            // "DOWN" was pressed, do DOWN stuff
            break;
    }
}
于 2013-03-13T20:16:15.420 に答える