網頁

HTML5:鼠標在canvas坐標








<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">body { font-size:70%; family:verdana,helvetica,arial,sans-serif; }
    </style>
<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
  </head>
  <body style="margin:0px;">
    <p>把鼠标悬停在下面的矩形上可以看到坐标:
    </p>
    <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
    </div><br /><br /><br />
    <div id="xycoordinates">
    </div>
  </body>
</html>



把鼠标悬停在下面的矩形上可以看到坐标: