您的位置：首页 > Web前端 > JavaScript

JavaScript获取鼠标点击坐标

2017-08-24 22:24 507 查看

如何用JavaScript获取鼠标点击时在canvas画布上的坐标呢：

代码如下：

--------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#canvas{
background:green;
width:100%;
height:100%;
}
body,html{
overflow:hidden;
width:100%;
height:100%;
}
</style>
<script type="text/javascript">
window.onload = function(){

var canvas = document.getElementById('canvas');　　//获取画布;

var utils = {};　　//创建空对象;
canvas.style.height = document.body.clientHeight;　　//设置全屏高度;
utils.captureMouse = function(canvas){　　//添加方法;
var mouse = {x:0,y:0};　　//初始化坐标位置;
canvas.addEventListener('mousemove',function(event){　　 //添加点击监听事件
var x,y;
if(event.pageX || event.pageY){
x = event.pageX;
y = event.pageY;
}else{
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;

mouse.x = x;　　//获取x轴坐标;
mouse.y = y;　　//获取Y轴坐标;
},false)
return mouse;　　//返回坐标;
};

mouse = utils.captureMouse(canvas);　　//实例化对象，传入参数;

canvas.addEventListener('click',function(){
alert("x: " + mouse.x + ", y: " + mouse.y);　　//弹出坐标;
},false);
};
</script>
</head>
<body>
<canvas id="canvas"></canvas>　　//创建canvas画布;
</body>
</html>

-----------------------------------------------------------

上面就是获取canvas画布上的坐标值了，将它封装起来，

放到单独的js文件中，需要用的时候再引入进去，就是一

个很好的工具了

-----------------------------------------------------------

感谢你的阅读，请继续支持博主哦!!!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航