摘要：
1.clientX、offsetX、screenX、pageX和x.clientX之间的差异，clientY：当前身体查看区域pageX的点击位置的x和y坐标，pageY：整个页面，包括滚动身体部分screenX的长度，screenY：当前计算机屏幕offsetX的点击位置的x和y坐标，offsetY：具有定位的父框的x和y坐标与screenX和screenY相同
1.clientX、offsetX、screenX、pageX、x的区别
- clientX、clientY:点击位置距离当前body可视区域的x，y坐标
- pageX、pageY:对于整个页面来说，包括了被卷去的body部分的长度
- screenX、screenY:点击位置距离当前电脑屏幕的x，y坐标
- offsetX、offsetY:相对于带有定位的父盒子的x，y坐标
- x、y:和screenX、screenY一样
2.设置canvas容器
<div style="position:relative;">
<canvas height="500"
style="border:1px solid yellow;position:absolute;left:100px;"></canvas>
</div>3.绘制canvas并进行拖拽
var can = document.getElementById("can"); var ctx = can.getContext("2d"); //初始化一个圆 createBlock(150, 350); //创建圆滑块 function createBlock(a, b) { ctx.beginPath(); line() ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(a, b, 30, 0, Math.PI * 2); ctx.strokeStyle = "red"; ctx.moveTo(0, 500); ctx.lineTo(a, b); ctx.stroke(); ctx.moveTo(100, 500); ctx.lineTo(a, b); ctx.stroke(); // Draw it } //鼠标按下，将鼠标按下坐标保存在x,y中 can.onmousedown = function (ev) { var e = ev || event; // var x = e.clientX; // var y = e.clientY; var x = e.offsetX; var y = e.offsetY; drag(x, y); // console.log(x, y) }; // 画坐标表格 function line() { for (var i = 1; i < 50; i++) { ctx.beginPath(); ctx.lineWidth = "1"; ctx.strokeStyle = "#000"; // Green path ctx.moveTo(0, (i - 1) * 10); ctx.lineTo(500, (i - 1) * 10); ctx.stroke(); i = i + 5 } for (var i = 1; i < 50; i++) { ctx.beginPath(); ctx.lineWidth = "1"; ctx.strokeStyle = "#000"; // Green path ctx.moveTo((i - 1) * 10, 0); ctx.lineTo((i - 1) * 10, 500); ctx.stroke(); i = i + 5 } }; //拖拽函数 function drag(x, y) { // 按下鼠标判断鼠标位置是否在圆上，当画布上有多个路径时，isPointInPath只能判断最后那一个绘制的路径 // sPointInPath判断点是不是在路径中 // 如果鼠标的坐标x,y是在圆上，则拖动 if (ctx.isPointInPath(x, y)) { // console.log(x, y) //路径正确，鼠标移动事件 ctx.beginPath(); can.onmousemove = function (ev) { var e = ev || event; // var ax = e.clientX; // var ay = e.clientY; var ax = e.offsetX; var ay = e.offsetY; //鼠标移动每一帧都清楚画布内容，然后重新画圆 ctx.clearRect(0, 0, can.width, can.height); createBlock(ax, ay); }; //鼠标松开事件 can.onmouseup = function () { can.onmousemove = null; can.onmouseup = null; }; }; }