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一樣

 <div style="position:relative;">
        <canvas id="can" width="500" 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;
            };
        };
    }