canvas获取鼠标位置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        canvas{ border: 1px solid black; }

    </style>

</head>

<body>

    <canvas id="myCanvas" width="500" height="500"></canvas>

    <script>

        var canvas = document.getElementById("myCanvas");

        var ctx = canvas.getContext("2d");

        ctx.font = "16px Arial";

        canvas.addEventListener("mousemove", function(e) {

            var cRect = canvas.getBoundingClientRect();

            var canvasX = Math.round(e.clientX - cRect.left);

            var canvasY = Math.round(e.clientY - cRect.top);

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);

        });

    </script>

</body>

</html>

canvas获取鼠标位置的更多相关文章

  1. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. C++获取鼠标位置及全局检测鼠标行为

    1.获取鼠标位置(在屏幕的位置)  CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ...

  3. jquery 获取鼠标位置

    //获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...

  4. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

  5. JavaScript获取鼠标位置的三种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...

  6. C# 图像处理:获取鼠标位置信息(全局)

    Point ms = Control.MousePosition; //获取鼠标位置 this.label2.Text = string.Format("{0}:{1}", ms. ...

  7. 兼容IE FF 获取鼠标位置

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

  8. JS获取鼠标位置，兼容IE FF

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

  9. javascript:与获取鼠标位置有关的属性

    javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了 ...

随机推荐

  1. 重学CPP

    LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt After install ...

  2. 高德地图 Android编程中 如何设置使 标记 marker 能够被拖拽

    由于本人对智能手机真心的不太会用,我本人大概是不到3年前才买的智能手机,用以前的索尼爱立信手机比较方便小巧,平时学习工作打个电话发个短信也就够了,出去吃饭一般都是朋友拿手机去弄什么美团团购啥的,然后我 ...

  3. UDP示例

    android学习笔记18--------------UDP示例 分类: android2011-11-10 10:07 848人阅读 评论(0) 收藏 举报 androidbufferexcepti ...

  4. Android：BroadcastReceiver

    参考:<第一行代码:Android> 郭霖(著)   Broadcast分类 注册方式: 动态广播 在代码中注册receiver 一定要手动在onDestroy()时调用unregiste ...

  5. 利用ajax完成项目图册上传删除【实际项目】

    [项目页面效果] [前台jsp页面] jsp的js代码 <script type="text/javascript"> //上传项目图片 function upload ...

  6. BZOJ1257 CQOI2007 余数之和 【数分块】

    BZOJ1257 CQOI2007 余数之和 Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + - + k mod n的值 其中 ...

  7. 20179223《Linux内核原理与分析》第十一周学习笔记

    缓冲区溢出漏洞实验 一.实验简介 缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况.这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片段.这一漏洞的出现是由于数据缓冲器和 ...

  8. 防范DDoS攻击的几种方式

    一.拒绝服务攻击的发展: 从拒绝服务攻击诞生到现在已经有了很多的发展,从最初的简单Dos到现在的DdoS.那么什么是Dos和DdoS呢?DoS是一种利用单台计算机的攻击 方式.而DdoS(Distri ...

  9. Scrapy源码研究前戏

    一.Twisted的使用 在 Twisted 中,有一种特殊的对象用于实现事件循环.这个对象叫做 reactor.可以把反应器(reactor)想象为 Twisted 程序的中枢神经.除了分发事件循环 ...

  10. Nginx配置（需要把nginx的根目录指向ftp上传文件的目录。）

    改成