`
128kj
  • 浏览: 600221 次
  • 来自: ...
社区版块
存档分类
最新评论

获取鼠标在HTML5 Canvas中的坐标

html5JavaScripthtmlcanvas 
阅读更多
<!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>
分享到：
| HTML5 Canvas动画模板
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    前端canvas例子，如何获取鼠标在canvas中的位置。

    canvas例子，如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行，F12可查看源代码。

    鼠标在canvas上悬浮，并提示鼠标位置信息

    在HTML5中，Canvas是一个非常重要的元素，它提供了一个基于矢量图形的画布，开发者可以使用JavaScript来绘制和操作图像。"鼠标在canvas上悬浮，并提示鼠标位置信息"这个主题涉及到了Canvas与事件处理、坐标系统以及...

    html5 canvas动画 人物怪物移动 鼠标点击控制

    HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上绘制图形并创建动态的交互体验。在这个“html5 canvas动画 人物怪物移动 鼠标点击控制”的实例中，我们将深入探讨如何利用HTML5 Canvas技术和...

    html5 canvas鼠标跟随线条动画特效

    本案例中，“html5 canvas鼠标跟随线条动画特效”是一个利用Canvas API创建的有趣应用，它能够实时追踪用户的鼠标移动，并在Canvas上绘制出变化色彩的线条轨迹。 首先，我们需要理解Canvas的基本结构。在HTML中，...

    HTML5 Canvas眼睛眼珠跟随鼠标转动特效

    当鼠标在Canvas上移动时，JavaScript会获取鼠标的当前位置，并计算出相对于眼睛中心点的距离和角度。然后，通过改变眼珠的坐标，使其看起来像是在跟随鼠标转动。这通常涉及到数学知识，如三角函数sin和cos来计算角度...

    Canvas 鼠标点击生成小圆点

    // 获取鼠标在Canvas上的坐标 const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; // 清空画布 ctx.clearRect(0, 0, canvas.width, ...

    利用canvas来根据鼠标的移动来画矩形

    在这个场景中，我们关注的是如何利用Canvas来根据鼠标的移动实时绘制矩形。这涉及到几个关键的知识点，包括Canvas的基本使用、鼠标事件监听以及动态图形的绘制。 首先，Canvas是HTML5新增的一个元素，它提供了一个...

    HTML5 Canvas鼠标移动圆点粒子跟随动画特效

    在这个“HTML5 Canvas鼠标移动圆点粒子跟随动画特效”中，我们看到一个创新且引人入胜的互动设计，用户可以通过鼠标移动来控制页面上的圆点粒子运动，实现了视觉与交互的完美融合。 首先，我们需要理解Canvas的基本...

    HTML5 Canvas眼睛跟随鼠标特效.zip

    "HTML5 Canvas眼睛跟随鼠标特效"是一个利用Canvas API实现的有趣互动效果，用户移动鼠标时，页面上的虚拟眼睛会随之改变方向，仿佛在盯着鼠标移动。 在实现这个特效时，首先我们需要理解Canvas的基本结构。HTML5 ...

    HTML5 Canvas学习笔记(1)处理鼠标事件

    可以使用`event.clientX`和`event.clientY`获取相对于浏览器窗口的鼠标坐标，但Canvas坐标系统可能与此不同，因此通常需要转换： ```javascript function getMousePos(canvas, event) { var rect = canvas....

    HTML5 Canvas 鼠标滑过3D动画效果

    在这个"HTML5 Canvas 鼠标滑过3D动画效果"的例子中，我们主要探讨的是如何利用Canvas API来实现一个互动的3D背景动画，当鼠标在画布上滑过时，动画会呈现出三维变换。 首先，我们需要在HTML文件中创建一个`&lt;canvas&gt;...

    HTML5 Canvas核心技术代码

    HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性，使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...

    html5 canvas绘制3D地球旋转动画特效

    HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的视觉效果。在这个“html5 canvas绘制3D地球旋转动画特效”中，我们将深入探讨如何利用HTML5 Canvas API来创建一个逼真...

    HTML5 Canvas鼠标点击页面光点放射动画特效

    HTML5 Canvas技术是Web开发中的一个强大工具，它允许开发者在网页上绘制图形，实现动态交互效果。在这个“HTML5 Canvas鼠标点击页面光点放射动画特效”中，我们看到的是一个利用Canvas API创建的视觉效果，当用户...

    HTML5 Canvas跟随鼠标移动的燃烧火焰动画特效

    HTML5中的`&lt;canvas&gt;`元素是一个矩形区域，可以用于绘制图形。通过JavaScript，我们可以获取到这个画布的`Context`对象，它是所有绘图操作的基础。在这个案例中，我们主要使用的是2D渲染上下文`canvas.getContext('2d...

    html5 canvas鼠标点击变化圆形泡沫动画特效

    HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行图形绘制，提供了丰富的API来实现动态和交互式的视觉效果。在这个“html5 canvas鼠标点击变化圆形泡沫动画特效”中，我们主要探讨以下几个核心知识...

    HTML5 canvas仿屏保动态管道

    通过`&lt;canvas&gt;`标签在HTML中创建一个画布，并通过JavaScript的`window.canvas.getContext('2d')`获取2D渲染上下文，这使得我们可以调用一系列绘图方法，如`fillRect()`、`strokeRect()`、`lineTo()`、`moveTo()`等，...

    html5 canvas跟随鼠标移动的光线动画特效

    Canvas的坐标系统可能与页面坐标不同，因此需要将鼠标事件中的坐标转换为Canvas坐标，以便正确绘制光线。 9. **光线效果模拟**： 实现光线特效可能涉及到对光的物理模拟，如光线的扩散、折射或衰减。这些可以通过...

    html5 canvas纸飞机跟随鼠标飞行动画特效

    HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行图形绘制，创造出丰富的交互式用户体验。这款“html5 canvas纸飞机跟随鼠标飞行动画特效”利用了Canvas的特性，结合JavaScript来实现动态的视觉...

    Canvas带坐标雷达扫描特效.zip

    在HTML中，我们通过`&lt;canvas&gt;`标签来创建一个画布，然后通过JavaScript的`document.getElementById('canvasId').getContext('2d')`获取到2D渲染上下文，这里'canvasId'是你定义的canvas元素的ID。 在这个雷达扫描...

Magicbox
Global site tag (gtag.js) - Google Analytics