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，选择的点（单击时的鼠标位置）是否在图像内部shape。

这可以解决您的问题。

于 2012-06-12T10:15:19.600 回答