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. EasyDarwin如何支持点播和RTMP/HLS直播？EasyDSS！

    2017年很长很长一段时间没有更新EasyDarwin开源项目了,虽然心里有很多EasyDarwin功能扩展的计划:比如同步录像.同步RTMP/HLS直播输出.拉模式转发优化.Onvif接入.GB28 ...

  2. SAPUI5使用了哪些开源技术

    我们知道SAP UI5已经开源了,共享给了Apache开源组织后的名字叫Open UI5,虽然从API的长度上看,Open UI5比SAP UI5要短,但是两者的核心并没有多大区别,SAP UI5多了 ...

  3. 数据交换格式 —— JSON（JavaScript Object Notation）

    当请求 headers 中,添加一个name为 Accept,值为 application/json 的 header(也即"我"(浏览器)接收的是 json 格式的数据),这样, ...

  4. 删除rz上传失败乱码的文件

    [摘要:经过rz上传文件失利时,会发生巨细为0的治码的文件,以下 ls-l -rw-rr1rootroot4703112-1513:48???.htm 这类范例的文件可用以下敕令 find.-maxd ...

  5. 框架重构：测试中的DateTime.Now

    存在的问题 DateTime.Now是C#语言中获取计算机的当前时间的代码: 但是,在对使用了DateTime.Now的方法进行测试时,由于计算机时间的实时性,期望值一直在变化.如:计算年龄. pub ...

  6. NET MVC 升级到5.1后，View视图中代码报错

    使用nuget将项目中MVC4 升级到MVC5,之后项目还可以正常编译运行, 但View视图中相关的很多代码都报错,比如: 1.@model找不到 2.@Html找不到,本该是System.Web.M ...

  7. iOS8扩展插件开发配置 [转载]

    一．iOS8扩展插件概述 WWDC14除了发布了OS X v10.10和switf外,iOS8.0也开始变得更加开放了.说到开放,当然要数应用扩展(App Extension)了.顾名思义,应用扩展允 ...

  8. NSURLSession学习笔记（一）简介

    一.URL Session的基本概念 1.三种工作模式: 默认会话模式(default):工作模式类似于原来的NSURLConnection,使用的是基于磁盘缓存的持久化策略,使用用户keychain ...

  9. 玩转Eclipse — 自动代码规范检查工具Checkstyle

    大项目都需要小组中的多人共同完成,但是每个人都有自己的编码习惯,甚至很多都是不正确的.那么如何使小组所有开发人员都遵循某些编码规范,以保证项目代码风格的一致性呢?如果硬性地要求每个开发人员在提交代码之 ...

  10. webpack 简单使用

    备注:  使用yarn 结合npm 模块进行简单项目开发 1. 安装 yarn init yarn add webpack --dev yarn global add live-server 2. 添 ...