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>

原文地址：https://www.cnblogs.com/ye-hcj/p/10356376.html

时间： 2024-10-29 03:31:42

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

如何获取鼠标位置

获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div> //进行操作 <script type="text/javascript"> var x,y,T,L; T=$("#m").offset().top;//div离开左端的距离 L=$("#m").offset().left;//

1.获取鼠标位置(在屏幕的位置) CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ClientToScreen(this->m_hwnd,m_mouse); //客户端位置转化为屏幕位置 ScreenToClient(this->m_hwnd,m_mouse) ; //屏幕转化为客户端 3.获取控件关于在屏幕的位置 CRect rc GetWindowRect(&

JS获取鼠标位置的三种方法

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠标位置首先要了解什么是event,event是一个声明了全局变量的一个对象,在chrome和IE下,可以随意访问,对于好奇的朋友console.log一下event.但!!!Firefox下是没有event这个对象的!! 好消息的是:在IE8,chrome下,是有event这个对象的! 鼠标点击位置

jquery 获取鼠标位置

//获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e.clientX + document.body.scroolLeft; __yy = e.pageY || e.clientY + document.body.scrollTop; }); }); 原文地址:https://www.cnblogs.com/azhqiang/p/10876958.ht

js获取鼠标位置的各种方法

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容鼠标点击位置坐标相对于屏幕如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi

获取鼠标位置的几个通用的JS函数

原文:http://www.open-open.com/code/view/1421401009218 /*两个通用函数,用于获取鼠标相对于整个页面的当前位置*/ function getX(e) { e = e || window.event; return e.pageX || e.clientX + document.body.scrollLeft; } function getY(e) { e = e || window.event; return e.pageY || e.client

BaseTool中鼠标双击事件获取鼠标位置的方法

ArcGISEngine的BaseTool类中提供了鼠标双击.鼠标移动.鼠标按键按下.鼠标按键弹起四种鼠标事件,但是鼠标双击事件的参数跟其他三种不一样,双击事件中没有提供鼠标位置信息. public virtual void OnDblClick(); public virtual void OnMouseDown(int Button, int Shift, int X, int Y); public virtual void OnMouseMove(int Button, int Shift

获取鼠标位置的颜色值

Color c = new Color();//创建颜色对象 Bitmap bitmap = new Bitmap(this.BackgroundImage);//创建BITMAP对象 int x = Cursor.Position.X;//鼠标x坐标 int y = Cursor.Position.Y;//鼠标y坐标 c = bitmap.GetPixel(x, y);//鼠标位置的颜色 this.Text = string.Format("R={0},G={1},B={2}", c

获取鼠标位置

IE 下获取 clientX/Y <script> function layer (){ var z =event.clientX;//鼠标横坐标 var f=event.clientY;//鼠标纵坐标 alert(z);//打印坐标数}</script><a onmouseover="layer()">测试测试</a>FireFox 下获取 clentX/Y<script> function layer (e){