Javascript 用箭头移动画布框

我一直在尝试用箭头键移动一个简单的画布框。代码如下：

这里还有：

$（函数（）{
var n=3；
var xD=0；
var yD=0；
//var移动；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量ss={
“x”：0，
“y”：0，
“宽度”：100，
“高度”：75
};
函数render（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.rect（不锈钢x、不锈钢y、不锈钢宽度、不锈钢高度）；
ctx.lineWidth=1；
ctx.strokeStyle=“黑色”；
ctx.stroke（）；
}
函数move（）{
x=ss.x+（xD*n）；
y=ss.y+（yD*n）；
ss.x=x；
ss.y=y；
}
$（文档）.keydown（函数（e）{
xD=e，哪个=37？-1:xD；
xD=e，其中=39？1:xD；
yD=e，哪个=38？-1:yD；
yD=e，其中=40？1:yD；
e、 预防默认值（）；
});
$（文档）.keyup（函数（e）{
xD=e.which==37？0:xD；
xD=e.which==39？0:xD；
yD=e，其中=38？0:yD；
yD=e，其中=40？0:yD；
e、 预防默认值（）；
});
render（）；
设置间隔（移动0.01）；
});
正文{
保证金：0；
}
#帆布{
边框：1px实心#000000；
}
您的render方法只会在最初启动，您应该将其添加为move方法的最后一行，这样画布将在每次移动后渲染新位置

function move() {
    x = ss.x + (xD * n);
    y = ss.y + (yD * n);
    ss.x = x;
    ss.y = y;
    render(); // add this line
}

尝试此解决方案，单击结果屏幕，然后使用键盘箭头键，如果这对您有效，请将我的解决方案标记为答案，如果您还需要其他内容，请发表评论


var画布；
var-ctx；
var-dx=5；
var-dy=5；
var x=150；
变量y=100；
var宽度=300；
var高度=200；
函数圆（x，y，r）{
ctx.beginPath（）；
弧（x，y，r，0，数学π*2，真）；
ctx.fill（）；
}
函数rect（x，y，w，h）{
ctx.beginPath（）；
ctx.rect（x，y，w，h）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
}
函数clear（）{
ctx.clearRect（0，0，宽度，高度）；
}
函数init（）{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
返回设置间隔（抽签，10）；
}
功能doKeyDown（evt）{
开关（evt.keyCode）{
案例38：/*按下向上箭头*/
如果（y-dy>0）{
y-=dy；
}
打破
案例40：按下了向下箭头*/
如果（y+dy<高度）{
y+=dy；
}
打破
案例37:/*按下左箭头*/
如果（x-dx>0）{
x-=dx；
}
打破
案例39:/*按下右箭头*/
if（x+dx<宽度）{
x+=dx；
}
打破
}
}
函数绘图（）{
清除（）；
ctx.fillStyle=“白色”；
ctx.strokeStyle=“黑色”；
矩形（0,0，宽度，高度）；
ctx.fillStyle=“紫色”；
圆（x，y，10）；
}
init（）；
window.addEventListener（'keydown'，doKeyDown，true）

帆布试验
如果您的浏览器不支持HTML5画布，则会显示此文本。
我在画布上是个十足的乞丐，在js中也很新，你能添加代码或其他什么吗？这真是太好了！对此我投赞成票，但这根本不是我想要的，我可能会在未来的比赛中使用它。很抱歉