获取当前坐标的方法

最新推荐文章于 2022-02-24 15:33:37 发布

hi_allen_liu

最新推荐文章于 2022-02-24 15:33:37 发布

阅读量536

点赞数

分类专栏： javascript 文章标签： function div float html c

本文链接：https://blog.csdn.net/hi_allen_liu/article/details/6756633

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        /*
		ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

		ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.strokeRect (30, 30, 100, 100);
		*/
		
		/*
		ctx.fillRect(25,25,100,100);
		ctx.clearRect(45,45,60,60);
		ctx.strokeRect(50,50,50,50);
		*/
		
		ctx.beginPath();
		ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle true表示顺时针
		ctx.moveTo(110,75);
		ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
		ctx.moveTo(65,65);
		ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
		ctx.moveTo(95,65);
		ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
		ctx.stroke();
         
		ctx.beginPath();
		ctx.moveTo(40,75);
		ctx.lineTo(60,65);
		ctx.lineTo(90,65);
		ctx.moveTo(110,75);
		ctx.lineTo(125,75);
		ctx.stroke();

      }
    }
	
	function getXY(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("d2").innerHTML="Coordinates: (" + x + "," + y + ")";
}
 
function clearXY()
{
document.getElementById("d2").innerHTML="";
}

  </script>
 </head>
 <body οnlοad="draw();">
   <div id="d1" style="float:left;width:300px;height:300px;border:1px solid #c3c3c3" οnmοusemοve="getXY(event)" οnmοuseοut="clearXY()">
   <canvas id="canvas" width="150" height="150"></canvas>
   </div>
   <div id="d2"></div>
 </body>
</html>

关键在于event.clientX的认识。

hi_allen_liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取当前坐标的方法

function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("
复制链接

扫一扫