Javascript 如何在HTML5画布和jquery中使用鼠标事件而不是键码?
我想将以下事件管理从keycode替换为mouse。我该怎么做呢 目前支持的浏览器=FF 3.6xJavascript 如何在HTML5画布和jquery中使用鼠标事件而不是键码?,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我想将以下事件管理从keycode替换为mouse。我该怎么做呢 目前支持的浏览器=FF 3.6x // this block of code needs to be replaced $(document).keydown(function(e) { //console.log(e.keyCode); switch(e.keyCode) { case 38: // down draw(x,y--); break; case 40: // up draw(x,y++); break; case
// this block of code needs to be replaced
$(document).keydown(function(e) {
//console.log(e.keyCode);
switch(e.keyCode) {
case 38: // down
draw(x,y--);
break;
case 40: // up
draw(x,y++);
break;
case 37: // left
draw(x--,y);
break;
case 39: // right
draw(x++,y);
break;
default:
draw(x,y);
}
});
// to be replaced with something like the following and add control
// we need to get the x,y coordinates upon mouse click, not onload, how?
$(document).onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
alert( mousePos);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
return {x:ev.pageX};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
// keep
function draw(x,y) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
ctx.font = "15pt Verdana";
// var ctx.lineWidth = 1;
ctx.clearRect(0,0,500,500);
x1 = x + 50;
y1 = y + 50;
ctx.fillText("Oh my god his pant is falling down",x1,y1);
x2 = x + 100;
y2 = y + 100;
ctx.fillText("shi shi we did not see anything",x2,y2);
x3 = x + 200;
y3 = y + 200;
ctx.fillText("what a happy man!",x3,y3);
}
draw(x,y);
基本上,将onmousemove事件处理程序添加到画布中,这需要处理(X,Y)的代码,这在不同的浏览器中显然是一个不同的属性。layerX&layerY用于FireFox;offsetX&offsetY for Opera.“哦,我的天哪,他的裤子掉下来了”你到底在建什么?哈哈哈,马特,画布上会有多个文本块,每个文本块都是可移动的,这是我的问题。大学教师