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. Swift UITextField各种属性的设置

    //MARK: 文本输入框 func _initTextField() { //如果需要在模拟器中调用电脑的键盘 快捷键:command + shift + k let textField = UIT ...

  2. vue实现简单评分效果

  3. Python 实现windows后台服务

    # -*- coding: utf-8 -*- import sys import win32api import win32con import win32event import win32ser ...

  4. 剑指offer第四章

    剑指offer第四章 1.二叉树的镜像 二叉树的镜像:输入一个二叉树,输出它的镜像 分析:求树的镜像过程其实就是在遍历树的同时,交换非叶结点的左右子结点. 求镜像的过程:先前序遍历这棵树的每个结点,如 ...

  5. 开启opcache提高性能

    在开启opcache之前,我们先介绍一下编译与解释: 编译器是把源程序的每一条语句都编译成机器语言,并保存成二进制文件,这样运行时计算机可以直接以机器语言来运行此程序,速度很快:而解释器则是只在执行程 ...

  6. getpwuid()

    getpwuid函数是通过用户的uid查找用户的passwd数据.如果出错时,它们都返回一个空指针并设置errno的值,用户可以根据perror函数查看出错的信息. 外文名 getpwuid() 头文 ...

  7. ECMALL转空间后出现空白问题解析

    今天客户网站做完的ECMall测试站,将数据库和代码分别传到了正式空间中.通过浏览器浏览,整个页面一片空白. 第一个反应是数据库配置有问题.打开网站根目录下data/config.ini.php,内容 ...

  8. callback&&callback()

    如果存在回调函数就执行!这是利用了 JS &&符号的一个小技巧&& 符号在前面为假时就不会执行后面的语句了所以这个就相当于 if(callback){ callback ...

  9. string源码实现分析

    最近写hashtable的实现的时候用模板类的思想,在普通int,long,double类型的时候测试时没问题的,当用到string的时候,一直有问题. 实现的equal函数是比较粗暴的使用两者所有对 ...

  10. 关于RedHat Enterprise Linux 6.4使用Centos 6 的yum源

    思路:卸载redhat自带yum,然后下载centos的yum,安装后修改配置文件 1.首先到http://mirrors.163.com/centos下载软件包 x86 地址:http://mirr ...