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

获取鼠标在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,同时根据鼠标的移动来画矩形，可以成功运行，刚开始学，不会，折腾了好久，希望对需要的人有帮助。

    HTML5 Canvas核心技术 图形、动画与游戏开发

    208 4.7　以图像制作动画 211 4.8　图像绘制的安全问题 216 4.9　性能 216 4.9.1　对比drawimage(htmlimage)、drawimage(htmlcanvas)与putimagedata()的绘图效率 217 4.9.2　在canvas中绘制另一个canvas与绘制普通...

    HTML5 Canvas鼠标与键盘事件demo示例

    本文的主要母的是演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动，感兴趣的朋友可以参考下哈，希望对大家有所帮助

    vue2.0获取鼠标位置的方法

    如下所示： ...#canvas{ width: 500px; height: 500px; text-align: center; line-height: 500px; border: 1px solid #E5E5E5; margin: 0 auto; margin-top: 100px; } &lt;/style&gt; &lt;/head&gt;

    WEB CAD中二次开发绘制任意线功能代码如何写？

    在 JavaScript 代码中，获取 Canvas 对象，并调用其 getContext() 方法获取一个渲染上下文对象。 ARX在线CAD画图，在鼠标按下事件和移动事件中，监听鼠标的位置，并使用 Canvas 上下文对象绘制直线。具体来说，可以...

    canvas实现刮刮卡效果

    demo中在class为content的div上盖上一层灰色的画布，然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标，通过在坐标原点位置画一个半径10px的透明圆形来透过画布，显示出画布下的内容。本demo是用时需要改变的...

    HTML5实现黑白棋游戏(附源码)

    黑白棋游戏通过相互翻转对方的棋子，最后以棋盘上谁的棋子多来判断胜负，具有显示执棋方可以落棋子的位置提示功能和判断胜负功能...关键技术有Canvas对象支持的JavaScript的鼠标事件，以及获取鼠标在Canvas对象上坐标。

    delphi 开发经验技巧宝典源码

    0007　在Delphi中加载QReport报表组件　7 1.3　创建DLL文件　8 0008　生成一个DLL文件　8 0009　调用DLL文件　8 1.4　窗体相关操作　9 0010　将组件置前/置后　9 0011　如何锁定窗体中的组件　9 0012　如何改变窗体...

    delphi 开发经验技巧宝典源码06

    0007　在Delphi中加载QReport报表组件　7 1.3　创建DLL文件　8 0008　生成一个DLL文件　8 0009　调用DLL文件　8 1.4　窗体相关操作　9 0010　将组件置前/置后　9 0011　如何锁定窗体中的组件　9 0012　如何改变窗体...

    Delphi5开发人员指南

    7.5 在应用程序中使用ActiveX控件 153 7.6 发布带有ActiveX控件的应用程序 154 7.7 注册ActiveX控件 155 7.8 BlackJack：一个OCX示范程序 155 7.8.1 纸牌 155 7.8.2 游戏 157 7.8.3 调用ActiveX控件的方法 165 7.9 ...

    贪吃蛇 函数封装经典案例.docx

    在新的HTML标准HTML5中Canvas 元素用于在网页上绘制图形， 该元素标签强大之处在于可以直接在HTML上进行图形操作，具 有极大的应用价值。 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形...

    WebGL编程指南压缩包

    在片元着色器中获取纹理像素颜色（texture2D()） 174 用示例程序做试验 175 使用多幅纹理 177 示例程序（MultiTexture.js） 178 总结 183 第6 章 OpenGL ES 着色器语言（GLSL ES） 185 回顾：基本着色器代码 ...

    WebGL编程指南

    在片元着色器中获取纹理像素颜色（texture2D()） 174 用示例程序做试验 175 使用多幅纹理 177 示例程序（MultiTexture.js） 178 总结 183 第6 章 OpenGL ES 着色器语言（GLSL ES） 185 回顾：基本着色器代码 ...

    webgl编程指南及源码1/2

    在片元着色器中获取纹理像素颜色（texture2D()） 174 用示例程序做试验 175 使用多幅纹理 177 示例程序（MultiTexture.js） 178 总结 183 第6 章 OpenGL ES 着色器语言（GLSL ES） 185 回顾：基本着色器代码 ...

    webgl编程指南及源码2/2

    在片元着色器中获取纹理像素颜色（texture2D()） 174 用示例程序做试验 175 使用多幅纹理 177 示例程序（MultiTexture.js） 178 总结 183 第6 章 OpenGL ES 着色器语言（GLSL ES） 185 回顾：基本着色器代码 ...

    Apress.Pro.WPF.in.C.Sharp.2008.2nd.Edition.Feb.2008

    9.2.5 在另外一个页面中宿主页面 212 9.2.6 在Web浏览器中宿主页面 213 9.3 页面历史 214 9.3.1 深入分析WPF中的URI 214 9.3.2 导航历史 215 9.3.3 维护自定义的属性 216 9.4 导航服务 217 9.4.1 通过编程进行导航 ...

    Silverlight2.0功能展示Demo源码

    MouseEventArgs.GetPosition() - 鼠标相对于指定元素的坐标 MouseButtonEventArgs.Handled - 此事件是否已被处理 KeyDown - 鼠标按下时触发的事件 KeyUp - 鼠标按下并放开时触发的事件 KeyEventArgs.Key - 与事件...

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