如何使用JavaScript在到达画布末端时停止对象？

这个矩形是我用javascript创建的，我可以用箭头键移动它。到现在为止，一直都还不错。现在我的问题是，我希望它在到达画布末端时停止。我不想让它消失在画布之外。我该怎么做

这是我的密码：

var画布；
var语境；
var-rectX=10；
var-rectY=10；
函数fillRect（）{
context.beginPath（）；
context.fillStyle=“#ffffff”；
context.fillRect（0,01000+canvas.width，1000+canvas.height）；
context.beginPath（）；
context.fillStyle=“#666666”；
fillRect（rectX，rectY，50,50）；
}
函数onkeydown（e）{
如果（e.keyCode==39）{rectX++；}//höger-pil
如果（e.keyCode==37）{rectX--；}//vänster-pil
如果（e.keyCode==38）{rectY--}//uppåt pil
如果（e.keyCode==40）{rectY++}//nedåt pil
fillRect（）；
}
window.addEventListener（“keydown”，onkeydown）；
window.onload=函数（）{
canvas=document.getElementById（“myCanvas”）；
context=canvas.getContext（“2d”）；
fillRect（）；
}

#我的画布{
保证金：自动；
显示：块；
宽度：80%；
高度：400px；
背景色：白色；
边框：3倍纯黑；
}

弗丽塔·雷克坦格伦
弗丽塔·雷克坦格伦
Flytta runt rektangeln med hjälp av Pillenna

这可能不是最有效的方法，但如果移动会或不会将矩形送走，您可以签入

onkeydown

，然后仅在安全的情况下移动矩形

编辑：类似这样的操作应该可以做到：）

函数onkeydown（e）{
如果（e.keyCode==39&&rectX+500）{rectX--；}//vänster-pil
如果（e.keyCode==38&&rectY>0）{rectY--}//uppåt pil
如果（e.keyCode==40&&rectY+50

旁注：您的代码片段不起作用（至少对我来说…）。它显示了

TypeError:canvas为null

：（感谢您指出这一点！也许它现在可以工作了？：）感谢您的帮助！：）但我必须承认我在这方面是个新手。。你能帮我说明一下你的意思吗？：）此代码将角色在画布上的位置以及画布的边界作为结束参数。当你按下任意一个设计键时，字符将移动，而位置不是最终像素。对不起，我不明白你的意思？“角色将在位置不是最终像素时移动”？非常感谢你，Daneel！起作用了，哈利路亚！：D

function onkeydown(e) {
    if(e.keyCode==39 && rectX+50 < canvas.width) {rectX++;} //höger pil
    else if(e.keyCode==37 && rectX > 0) {rectX--;} //vänster pil
    else if(e.keyCode==38 && rectY > 0) {rectY--;} //uppåt pil
    else if(e.keyCode==40 && rectY+50 < canvas.height) {rectY++;} //nedåt pil
    fillRect();
}