admin管理员组文章数量:1025493
Hello so i am trying to learn how to do a drawing app using HTML5 canvas and i wrote this code so far, the thing is the browser console keeps telling me that Cannot read property 'clientX' of undefined, i am using jquery of course
here is the JS code:
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());
Hello so i am trying to learn how to do a drawing app using HTML5 canvas and i wrote this code so far, the thing is the browser console keeps telling me that Cannot read property 'clientX' of undefined, i am using jquery of course
here is the JS code:
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());
1 Answer
Reset to default 3You must pass argument e in functions draw_click, draw and draw_stop, and also in function get_mouse_pos. When you pass no arguments, in function get_mouse_pos variable e is 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());
Hello so i am trying to learn how to do a drawing app using HTML5 canvas and i wrote this code so far, the thing is the browser console keeps telling me that Cannot read property 'clientX' of undefined, i am using jquery of course
here is the JS code:
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());
Hello so i am trying to learn how to do a drawing app using HTML5 canvas and i wrote this code so far, the thing is the browser console keeps telling me that Cannot read property 'clientX' of undefined, i am using jquery of course
here is the JS code:
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());
1 Answer
Reset to default 3You must pass argument e in functions draw_click, draw and draw_stop, and also in function get_mouse_pos. When you pass no arguments, in function get_mouse_pos variable e is 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());
本文标签： javascriptCannot read property 39clientX39 of undefinedusing jQueryStack Overflow
版权声明：本文标题：javascript - Cannot read property 'clientX' of undefined, using jquery - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1744966261a2126867.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论