1、offsetX
offset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。
2、clientX
事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条
3、pageX
事件对象相对于整个文档的坐标以像素为单位.
4、screenX
事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变.
以上除了screenX/Y以设备像素为单位，其他都是以css像素为单位
下面以一个实例来解释说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
margin: 0 auto;
padding: 0;
}
#canvas{
border:20px solid blue;
margin-left: 300px;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
<script>
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
ctx.arc(0,0,5,0,2*Math.PI);
ctx.arc(200,200,5,0,2*Math.PI);
ctx.font="20px Arial";
ctx.textAlign='start';
ctx.fillText("画布坐标200 200",200,200);
ctx.fill();
canvas.onmousedown=function (e) {
console.log("e.offsetX=",e.offsetX);
console.log("e.clientX=",e.clientX);
console.log("e.pageX=",e.pageX);
console.log("e.screenX=",e.screenX);
}
</script>
当没有滚动条的时候,pageX==clientX,offsetX=pageX+(margin-left)+border
当有滚动条的时候,pageX!=clientX