无法读取未定义的属性'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());