HTML5画布鼠标坐标教程

最新推荐文章于 2022-07-11 07:37:00 发布

原创最新推荐文章于 2022-07-11 07:37:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5画布鼠标坐标教程

HTML5画布鼠标坐标教程专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种方法，用于获取鼠标在HTML5画布上的坐标位置。通过使用JavaScript实现的getMousePos()函数，结合canvas元素的getBoundingClientRect()方法，可以实时显示鼠标在画布内的坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取鼠标坐标相对于一个HTML5画布,我们可以创建一个getMousePos()方法返回鼠标坐标根据客户鼠标的位置和画布的位置从getBoundingClientRect()方法获得的窗口对象。

说明:鼠标移至画布看到鼠标坐标。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      function writeMessage(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      canvas.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        writeMessage(canvas, message);
      }, false);
    </script>
  </body>
</html>