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获取鼠标位置的更多相关文章

jq获取鼠标位置
jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
C++获取鼠标位置及全局检测鼠标行为
1.获取鼠标位置(在屏幕的位置) CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ...
jquery 获取鼠标位置
//获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现版权声明: 本文版权属于北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...
JavaScript获取鼠标位置的三种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...
C# 图像处理:获取鼠标位置信息(全局)
Point ms = Control.MousePosition; //获取鼠标位置 this.label2.Text = string.Format("{0}:{1}", ms. ...
兼容IE FF 获取鼠标位置
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
JS获取鼠标位置，兼容IE FF
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
javascript:与获取鼠标位置有关的属性
javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。我们通过监听document的mousemove，就可以实时获得鼠标位置。但是！！event中和鼠标相关的属性太多了 ...

随机推荐

[javascript]复制到剪切板
 <button class="copy-link" data-fulllink="要被复制的内容在这里-" ...
如何让Beamer的logo放在右上角
# 位置需要导入包```\usepackage{beamerfoils}\usepackage{tikz}\usepackage{pgf}\MyLogo{%%\includegraphics[heig ...
Java启动参数及调优
java启动参数共分为三类: 其一是标准参数(-),所有的JVM实现都必须实现这些参数的功能,而且向后兼容:其二是非标准参数(-X),默认jvm实现这些参数的功能,但是并不保证所有jvm实现都满足,且 ...
NET MVC 升级到5.1后，View视图中代码报错
使用nuget将项目中MVC4 升级到MVC5,之后项目还可以正常编译运行, 但View视图中相关的很多代码都报错,比如: 1.@model找不到 2.@Html找不到,本该是System.Web.M ...
Luogu3387 缩点【tarjan】【DP】
Luogu3387 缩点题目背景缩点+DP 题目描述给定一个n个点m条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 允许多次经过一条边或者一个点, ...
pat甲级 1154 Vertex Coloring （25 分）
A proper vertex coloring is a labeling of the graph's vertices with colors such that no two vertices ...
Mac OS安装php-redis扩展
下载php-redis(用于php5.x的版本),地址:https://nodeload.github.com/nicolasff/phpredis/zip/master. 如果是php7.2,选择p ...
__getitem__ 专用方法
(1) __getitem__ 专用方法很简单.像普通的方法 clear,keys 和 values 一样,它只是重定向到字典,返回字典的值.但是怎么调用它呢?哦,你可以直接调用 __getitem ...
Navicat Premium 连接Oracle 出现ora-12505 错误解决方案
找到listener.ora文件:我的Oracle是安装在F盘, 路径为:F:\oracle\product\10.2.0\db_1\network\admin\listener.ora 改动前的配 ...
使用Navicat for Oracle新建表空间、用户及权限赋予 (转)
Navicat for Oracle是有关Oracle数据库的客户端工具.通过这个客户端,我们可以图形方式对Oracle数据库进行操作. 说明我们此次试验的Oracle数据库版本是Oracle 10G ...

canvas获取鼠标位置

canvas获取鼠标位置

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

随机推荐

热门专题