0

これが私のコードです：

<body>
    <canvas id="myCanvas" width="1100" height="600" style="border:1px solid #c3c3c3; cursor:move">
        Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">
        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");
        var img=new Image();
        img.src="image.jpg";
        img.id="im";

        img.onload = function(){
            ctx.drawImage(img,0,0,100,100);
            autoRun();
        };

        function autoRun(){
            ctx.clearRect(0, 0, 1100,600);
            img.id="im";
            ctx.drawImage(img,Math.floor((Math.random()*1000)+1),Math.floor((Math.random()*500)+1),70,70);
            setTimeout('autoRun()',1000);
        }   
    </script>
</body>

ここでは、X 座標と Y 座標の設定にランダムな方法を使用しているため、画像が動的に移動し、キャンバスの領域が移動します ...

 setTimeout('autoRun()',1000);

上記の行は、毎秒自動実行関数 javascript を呼び出し、その関数はキャンバスをクリアし、新しい座標で画像を再描画します....

画像をクリックしたときに画像のIDを取得したいと思います。どうやってやるの？

4

2 に答える 2

1

編集-これは機能しません！これはあなたのために働くべきですか？または他の合併症はありますか？

//This would bind to all image, but you can use
//other jquery selectors to select your perticular 
//image
$('img').click(function(){
  var my_id = $(this).attr('id');
  return false;
});

編集

「..画像自体はDOMで使用できません。一時的に作成してキャンバスに描画しました。したがって、キャンバスは画像のコンテンツを保持し、画像自体はDOMにありません。」

jQueryを使用してキャンバス内の画像を選択します

于 2012-06-12T09:47:54.877 に答える
1

image(境界ピクセルを定義する)の形状をセグメント化し、の内側をクリックしたときcanvasに、選択したポイント (クリック時のマウスの位置) が image の内側にあるかどうかを確認する必要があると思いますshape。

これは、問題の解決策になる可能性があります。

于 2012-06-12T10:15:19.600 に答える