HTML5 Canvas实战
6.2 使用画布鼠标坐标
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

与画布交互:为图形和区域附加事件监听器

创建一个Events类

使用画布鼠标坐标

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

画布坐标系
图6-1 画布坐标系

操作步骤

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

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()方法启动监听。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验