6.2 使用画布鼠标坐标

优质

小牛编辑

127浏览

2023-12-01

我们体验一下Events类吧！为了使其尽量简单，我们使用Events类的getMousePos()获取鼠标光标的坐标，并在画布的左上角显示出来。getMousePos()方法返回相对于画布的坐标，它会考虑画布相对于页面的偏移，以及页面的滚动位置。

操作步骤

按照以下步骤，在每次鼠标移动时，获取画布上的鼠标坐标，并在画布的左上角显示出来：

1. 链接到Events类：

<script src="events.js">
</script>

2. 定义writeMessage()函数，该函数输出一条消息：

<script>
function writeMessage(context, message){
  context.font  = "18pt Calibri";
  context.fillStyle  = "black";
  context.fillText(message,  10,  25);
}

3. 实例化一个Events对象，并获取画布及上下文对象：

window.onload  = function(){
  var events  = new Events("myCanvas");
  var canvas  = events.getCanvas();
  var context  = events.getContext();

4. 当用户鼠标移出画布，清除画布并输出“Mouseover me!”消息：

canvas.addEventListener("mouseout", function(){
  events.clear();
  writeMessage(context, "Mouseover me!"); }, false);

5. 当用户在画布内移动鼠标，清除画布并输出鼠标位置：

canvas.addEventListener("mousemove", function(){
  var mousePos  = events.getMousePos();
  events.clear();
  if  (mousePos  !== null)  {
    message  = "Mouse position: "  + mousePos.x  + ","  +  mousePos.y;
    writeMessage(context, message);
  }
  }, false);

6. 启动监听事件：

  // 如果没有设置stage函数，我们必须手动启动事件监听
  events.listen();

7. 用户开始前，输出初始消息：

  writeMessage(context, "Mouseover me!");
  };
</script>

8. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

页面加载完成后，我们可以实例化一个Events对象，以便拥有getMousePos()方法的访问权。接下来，我们可以给canvas对象附加mouseout事件监听器，该事件会显示“Mouseover me!”消息，并给canvas对象附加mousemove事件监听器，它会调用getMousePos()方法来获取鼠标位置，并输出其坐标。最后，我们可以使用listen()方法启动监听。