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. This is very likely to create a memory leak. Stack trace of thread

    1.错误描述 警告: The web application [cmp] appears to have started a thread named [Abandoned connection cl ...

  2. BitArray编写埃拉托斯特尼筛法（原书错误，学习更正）

    刚开始代码无法运行,修改后原书代码可以运行了,可是书本的思想还是错的. 虽然接下来的都是讲错误的思想下的“错误”的修改. 原书缺了窗体控件的代码,虽然在VS下不需要手动写窗体的代码,但是刚开始确实也不 ...

  3. 关于pycharm的激活码

    http://kadara.ru:1017 http://roothat.ru:1017 http://jetbrains.tencent.clickn http://idea.imsxm.com/  ...

  4. Mysql 5.7初始化密码

    一.MAC Mysql安装 1.下载dmg安装 从http://dev.mysql.com/downloads/mysql/下载dmg安装 二.Mysql密码修改 1.通过mysql -uroot - ...

  5. mount: /dev/sdb already mounted or /sheepdog1 busy（multipath，wwid，uuid，udev）

    正常处理逻辑: 先umount /dev/sdb或是umount /backup如果还是显示的busy,你试试下面的方法fuser -m /dev/sdb查看一下是否sdb1正在被使用,或是有进程正在 ...

  6. 互联网的keyvalue处理

    今天在和许伟讨论系统配置页面得时候,许伟提到了“打通页面”的概念,当时我没太明白,后来才知道是指类似于cloudera里面的配置页面那种,不是列表页,而是展示+编辑在一个页面.刚才想了一下,其实对于这 ...

  7. 将socket程序从linux移植到windows上

    今天突然想试下纯socket编程在两个系统上代码重合量有多大,只要不使用VC自定义的宏(比如SOCKET.SOCKADDR等等)感觉代码重合量挺大的. 比如最简单的TCP客户端和服务端对话,在VC中用 ...

  8. 雅虎CSS初始化代码

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,b ...

  9. QT——在QGraphicsScene中限制图元的拖动范围

    欲使QGraphicsItem可拖动,则需设置标志位:setFlag(ItemIsMovable,true); 而如果想限制QGraphicsItem对象的移动范围,需要继承QGraphicsItem ...

  10. Spring security 如何设置才能避免拦截到静态资源

    问题:继承FilterSecurityInterceptor自定义Spring security拦截器,但是每次都拦截了css等静态资源,应该如何设置? @Override protected voi ...