Javascript 在按键上随机移动对象

我想在按键上随机移动一个对象（空格键是特定的）。然而，我对JS是新手。我无法做到完全的随机性。有人能帮我在这个代码中实现这一点吗？而且，当我按下空格键时，图像会变大，但当我使用鼠标时，图像会变小。我希望图像总是小的

编辑1：为了实现随机性，我使用了一些绝对值。因此，随机性在一定范围内起作用。我想消除对绝对值的依赖

当我使用鼠标上下事件时，图像会变小。

主体{}
帆布{
边界：1px；
}
$（函数（）{
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
};
img.src=”http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg";
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
var IsDraging=错误；
功能手柄向下（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
//设置拖动标志
IsDraging=true；
}
功能handleMouseUp（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
//清除拖动标志
IsDraging=错误；
}
函数handleMouseOut（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
//用户已离开画布，请清除拖动标志
//IsDraging=错误；
}
功能手柄移动（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
//如果设置了拖动标志，请清除画布并绘制图像
if（ISDRAGING）{
ctx.clearRect（0，0，画布宽度，画布高度）；
ctx.drawImage（img，canMouseX-128/2，canMouseY-120/2128120）；
}
}
功能手柄按键（e）{
如果（e.which==32）{
canKeybX=Math.random（）*500*Math.random（）；
canKeybY=Math.random（）*400*Math.random（）；
ctx.clearRect（0，0，画布宽度，画布高度）；
ctx.drawImage（img、CANKEBX、CANKEBY）；
}
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handleMouseOut（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#画布”）.mousemove（函数（e）{
手推车（e）；
});
$（“#画布”）.keydown（（函数（e）{
手动按键（e）；
}));
}); // end$（函数（）{}）；

如果你想这样做，你必须设置你的

128、120

始终处于绘制状态。您只需在鼠标移动时设置此宽度和高度。也许你应该使用类似于

window.innerWidth

var img=newimage（）；
img.onload=函数（）{
ctx.drawImage（img，0，0，128，120）；
};
img.src=”http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg";
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
var IsDraging=错误；
功能手柄向下（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
//设置拖动标志
IsDraging=true；
}
功能handleMouseUp（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
//清除拖动标志
IsDraging=错误；
}
函数handleMouseOut（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
//用户已离开画布，请清除拖动标志
//IsDraging=错误；
}
功能手柄移动（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
//如果设置了拖动标志，请清除画布并绘制图像
if（ISDRAGING）{
ctx.clearRect（0，0，画布宽度，画布高度）；
ctx.drawImage（img，canMouseX-128/2，canMouseY-120/2128120）；
}
}
功能手柄按键（e）{
如果（e.which==32）{
canKeybX=Math.random（）*500*Math.random（）；
canKeybY=Math.random（）*400*Math.random（）；
ctx.clearRect（0，0，画布宽度，画布高度）；
ctx.drawImage（img、canKeybX、canKeybY、128120）；
}
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handleMouseOut（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#画布”）.mousemove（函数（e）{
手推车（e）；
});
$（“#画布”）.keydown（（函数（e）{
手动按键（e）；
}));
嗯，这个版本适合我。添加
imgWidth
imgHeight
vars，而不是数值，为每个画布重新绘制添加宽度和高度，并在按键上固定img的位置



主体{}
帆布{
边界：1px；
}
$（函数（）{
var imgWidth=128；
var imgHeight=120；
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0，0，imgWidth，imgHeight）；
};
img.src=”http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animal