Javascript 发出带有箭头键的旋转画布形状

我希望左箭头键和右箭头键分别顺时针和逆时针旋转画布形状。当前形状仅线性移动

从长远来看，我试图用这个javascript代码复制我的ROS（机器人操作系统）TurtleSim的运动，左右键以这种方式旋转TurtleSim。（我对javascript相当陌生。）

函数父函数（）{
//diffColor=false；
maincavas.load（）；
跟踪器=新轨迹（30,50，“白色”，30,120）；//创建将随关键点移动的对象；
单击（）；
//触摸（）；
//制作动画（）；
//load（）；
}
函数单击（）{
window.addEventListener（“单击”，getClickPosition，false）；
函数getClickPosition（e）{
tracker.distanceX=e.clientX-（tracker.width/2）；//将跟踪器移动到跟踪器中心附近；clientX获取光标的水平坐标
tracker.distance=e.clientY-（tracker.height/2）；
}
}
var mainCanvas={
画布：document.createElement（“画布”），
加载：函数（）{
this.canvas.width=（window.innerWidth）/2；
this.canvas.height=window.innerHeight；
this.ctx1=this.canvas.getContext（“2d”）；
document.body.insertBefore（this.canvas，document.body.childNodes[0]）；
this.interval=setInterval（moveTracker，20）；
window.addEventListener（“向下键”，函数（e）{
console.log（例如keyCode）；
mainCanvas.key=e.keyCode；//按下该键时执行移动
});
window.addEventListener（“键控”，函数（e）{
mainCanvas.key=false；//释放键后停止移动
});
},
清除：函数（）{
this.ctx1.clearRect（0，0，this.canvas.width，this.canvas.height）；
}
}
功能轨迹（宽度、高度、颜色、距离X、距离Y、正方形）{
这个。宽度=宽度；
高度=高度；
这是0.speedX=0；
该值为0；
this.distanceX=distanceX；
this.distanceY=距离；
此值为0.rotationSpeedRight=0；
这是指旋转速度=0；
this.rotationLeft=rotationLeft；
this.rotationRight=rotationRight；
log（“内部轨道（）”）；
this.update=函数（正方形）{
ctx=maincavas.ctx1；
ctx.fillStyle=颜色；
ctx.fillRect（this.distanceX，this.distanceY，this.width，this.height，this.rotationLeft，this.rotationRight）；
ctx旋转（45*Math.PI/180）；
ctx.save（）；
ctx.restore（）；
}
this.newPosition=函数（）{
this.rotation+=this.rotationSpeed；
this.distanceX+=this.speed*Math.cos（this.rotation）；
this.distanceY+=this.speed*Math.sin（this.rotation）；
}
}
函数moveTracker（）{//从键盘识别键
maincavas.clear（）；
tracker.speedX=0；
tracker.speedY=0；
tracker.rotationSpeedRight=0；
tracker.rotationSpeedLeft=0；
if（maincavas.key&&maincavas.key==37）//left key；应逆时针移动
tracker.rotationSpeedLeft=-1；
if（maincavas.key&&maincavas.key==38）//向下键
tracker.speedY=-1；
if（maincavas.key&&maincavas.key==39）//右键；应顺时针移动；
tracker.rotationSpeedRight=1；
if（maincavas.key&&maincavas.key==40）//向上键
追踪器。速度=1；
tracker.newPosition（）；
tracker.update（）；
}

没有“左旋转”和“右旋转”这两个词，它们都指同一个词。您只需要一个旋转值，它是图形的当前角度

我还假设您希望向上键指向您所面对的任何方向，而不是始终向上，因此您也可以将速度值切换为一个值，即当前方向的速度。这基本上将坐标系从（x，y）更改为（角度和距离）。
要知道基于旋转和速度的移动在X-Y平面上的最终变化，必须对X使用

speed*cos（angle）

，对Y使用

speed*sin（angle）

在绘制矩形之前需要调用

rotate

（基本上是说“我接下来要做的所有事情都需要按该数量进行旋转”），

save

和

restore

需要围绕所有这些调用，以便在绘制完旋转的形状后取消旋转

另一个注意事项：

rotate

围绕原点（0,0）旋转画布。要围绕元素的中心旋转（这可能是您想要做的），您需要首先将

平移到该位置，然后不要忘记偏移绘制矩形的位置，以考虑初始平移

代码底部的潜在更新可能是：

function track(width, height, color, distanceX, distanceY, rotation){
    this.width = width;
    this.height = height;
    this.distanceX = distanceX || 0;
    this.distanceY = distanceY || 0;
    this.speed = 0;
    this.rotation = rotation || 0;
    this.rotationSpeed = 0;

    this.update = function(){
        ctx = mainCanvas.ctx1;
        ctx.fillStyle = color;
        ctx.save();
        ctx.translate(this.distanceX, this.distanceY);
        ctx.rotate(this.rotation);
        ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
        ctx.restore();
    }
    this.newPosition = function(){
        this.rotation += this.rotationSpeed;
        this.distanceX += this.speed * Math.cos(this.rotation);
        this.distanceY += this.speed * Math.sin(this.rotation);
    }
}

function moveTracker(){ //recognize keys from keyboard
    mainCanvas.clear();
    tracker.speed = 0;
    tracker.rotationSpeed = 0;
    // Adjust the values as you need here
    if (mainCanvas.key == 37) //left key
        tracker.rotationSpeed = -0.5 / Math.PI;
    if (mainCanvas.key == 38) //up key
        tracker.speed = 3;
    if (mainCanvas.key == 39) //right key
        tracker.rotationSpeed = 0.5 / Math.PI;
    if (mainCanvas.key == 40) //down key
        tracker.speed = -3;

    tracker.newPosition();
    tracker.update();
}

（粗略版）
存储旋转和旋转速度的方法与存储位置（“距离”）和速度的方法相同。在moveTracker函数中更改它（基于按键），并将其与更新函数中的fillRect一起使用。@BaliBalo:谢谢您的回复！我曾试图实施你的建议，但现在我的浏览器出现了一个错误。我相信这是因为我没有正确使用rotate（）和save（）；你能看看我编辑的代码，告诉我哪里出错了吗？你不需要两次旋转，旋转只是一个值。在您的案例中，操作顺序也应该是这样的
save->rotate->draw->restore
。我会写一封回信的谢谢你的帮助！我将在我的代码中实现这一点！我也可以问一下：距离方程和毕达哥拉斯定理有什么关系？（很抱歉延迟查询；我不再承受完成此项目之前的压力，因此我现在尝试了解并扩展此内容，以备将来在我的机器人上使用。）@SK这就是如何将极坐标（角度和距离）转换为笛卡尔坐标（x和y）。不可能
function track(width, height, color, distanceX, distanceY, rotation){
    this.width = width;
    this.height = height;
    this.distanceX = distanceX || 0;
    this.distanceY = distanceY || 0;
    this.speed = 0;
    this.rotation = rotation || 0;
    this.rotationSpeed = 0;

    this.update = function(){
        ctx = mainCanvas.ctx1;
        ctx.fillStyle = color;
        ctx.save();
        ctx.translate(this.distanceX, this.distanceY);
        ctx.rotate(this.rotation);
        ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
        ctx.restore();
    }
    this.newPosition = function(){
        this.rotation += this.rotationSpeed;
        this.distanceX += this.speed * Math.cos(this.rotation);
        this.distanceY += this.speed * Math.sin(this.rotation);
    }
}

function moveTracker(){ //recognize keys from keyboard
    mainCanvas.clear();
    tracker.speed = 0;
    tracker.rotationSpeed = 0;
    // Adjust the values as you need here
    if (mainCanvas.key == 37) //left key
        tracker.rotationSpeed = -0.5 / Math.PI;
    if (mainCanvas.key == 38) //up key
        tracker.speed = 3;
    if (mainCanvas.key == 39) //right key
        tracker.rotationSpeed = 0.5 / Math.PI;
    if (mainCanvas.key == 40) //down key
        tracker.speed = -3;

    tracker.newPosition();
    tracker.update();
}