jqueryを使用して未定義のプロパティ 'clientX'を読み取ることができません

Question

こんにちは、私はHTML5キャンバスを使用して描画アプリケーションを行う方法を学ぼうとしています これは今までこのコードを書いていました。

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

あなたが機能draw_click、drawとdraw_stop、また機能get_mouse_pos内で引数eを渡す必要があります。ここに

もちろん

の未定義のプロパティ「clientX」を読んで、私が使用していますjqueryのは、JSコードです。引数を渡さない場合、関数 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());