無法讀取未定義的屬性'clientX'，使用jquery

Question

你好，所以我想學習如何使用HTML5 canvas 來繪製應用程序，並且我到目前爲止寫了這段代碼，事情是瀏覽器控制檯告訴我，不能當然

這裏讀的未定義的屬性「clientX」，我使用jQuery是JS代碼：

var canvas; 
var context; 


function getMousePos(e) { 
    var canBoundX = canvas.offsetLeft; 
    var canBoundY = canvas.offsetTop; 
    var x = e.clientX - canBoundX, 
     y = e.clientY - canBoundY; 

    return {x: x, y: y}; 
} 


function drag_click() { 
    console.log(getMousePos()); 
} 

function drag() { 
    console.log(getMousePos()); 
} 

function drag_stop() { 
    console.log(getMousePos()); 
} 

function draw() { 
    canvas = $("#mainCanvas")[0]; 
    context = canvas.getContext('2d'); 
    context.strokeStyle = "#000"; 
    context.lineWidth = 4; 
    context.lineCap = "round"; 

    $(canvas).mousedown(function (e) { 
     drag_click(); 
    }); 
    $(canvas).mousemove(function (e) { 
     drag(); 
    }); 
    $(canvas).mouseup(function (e) { 
     drag_stop(); 
    }); 
} 


$(document).ready(draw()); 

Answer 1

你必須通過參數e函數draw_click，draw和draw_stop，並且在功能上也get_mouse_pos。當您傳遞任何參數時，函數get_mouse_pos變量e是undefined。

var canvas; 
var context; 


function getMousePos(e) { 
    var canBoundX = canvas.offsetLeft; 
    var canBoundY = canvas.offsetTop; 
    var x = e.clientX - canBoundX, 
     y = e.clientY - canBoundY; 

    return {x: x, y: y}; 
} 


function drag_click(e) { 
    console.log(getMousePos(e)); 
} 

function drag(e) { 
    console.log(getMousePos(e)); 
} 

function drag_stop(e) { 
    console.log(getMousePos(e)); 
} 

function draw() { 
    canvas = $("#mainCanvas")[0]; 
    context = canvas.getContext('2d'); 
    context.strokeStyle = "#000"; 
    context.lineWidth = 4; 
    context.lineCap = "round"; 

    $(canvas).mousedown(function (e) { 
     drag_click(e); 
    }); 
    $(canvas).mousemove(function (e) { 
     drag(e); 
    }); 
    $(canvas).mouseup(function (e) { 
     drag_stop(e); 
    }); 
} 


$(document).ready(draw());