Javascript 图像和画布旋转

我正在尝试旋转图像，并使用箭头键在画布上移动它。计划是让左右键控制图像的旋转，上下键控制移动——有点像坦克

我可以成功地围绕中心点旋转图像，并将其放回画布中应该的位置，但一旦旋转45度，我希望向上键将其向右移动，旋转180，向上键将其向下移动画布等。此时，我可以使用左/右键旋转图像，但向上/向下键总是在画布上向上/向下

我是否需要以与图像相同的量旋转画布坐标

这是我到目前为止所拥有的，并且在我的绘图函数中

ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(T1.x + base_image.width/2, T1.y + base_image.height/2);

ctx.rotate(rotation * Math.PI/180);

ctx.translate(-(T1.x + base_image.width/2), -(T1.y + base_image.height/2));
ctx.drawImage(base_image, T1.x, T1.y);

ctx.stroke();
ctx.restore()

T1.x

和

T1.y

是图像的x和y坐标

---

谢谢

终于拿到了！解决方案是分离旋转和移动，而不是尝试使用

ctx.translate

在我的绘图函数中，每100 Hz调用一次：

ctx.save();
ctx.translate(T1.x + base_image.width/2, T1.y + base_image.height/2);
ctx.rotate(rotation*Math.PI/180);
ctx.drawImage(base_image, -base_image.width/2, -base_image.height/2);
ctx.restore();
ctx.stroke();

例如，左键类似于：

rotation = rotation - 5;
Draw();

var radians = (rotation*Math.PI/180)
T1.x += 4*Math.cos(radians);
T1.y += 4*Math.sin(radians);
Draw();

例如，向上键类似于：

rotation = rotation - 5;
Draw();

var radians = (rotation*Math.PI/180)
T1.x += 4*Math.cos(radians);
T1.y += 4*Math.sin(radians);
Draw();

---

注意：为了实现这一点，我必须将绘画中图像的默认方向更改45度。

在Edge、Chrome和Firefox上绘制旋转、均匀缩放图像的最快方法是

// When the image has loaded add the center offsets
image.onload = function(){
   // … your code 
   this.centerX = -this.width/2;
   this.centerY = -this.height/2;
}

// When rendering
// x,y position of image center
// scale the uniform scale
// rotate angle in radians starting at 0 and + clockwise
var xdx = Math.cos(rotate) * scale;
var xdy = Math.sin(rotate) * scale;
ctx.setTransform(xdx, xdy, -xdy, xdx, x, y);
ctx.drawImage(image,image.centerX,image.centerY)

上面的方法加上额外的sin和cos以及两个乘法，在Chrome上要快得多，在Firefox上要快得多，我忘记了Edge上的边距，但它比下一个最快的方法要快：

ctx.setTransform(scale, 0, 0, scale, x, y);
ctx.rotate(rotate);
ctx.drawImage(image, image.centerX, image.centerY);

虽然我将保持画布转换状态不变，但您可以继续使用这两种方法，而无需重置画布状态。完成所有渲染后，要恢复当前变换，请使用

ctx.setTransform(1, 0, 0, 1, 0, 0);     

---

为了节省一点时间，每次从度转换为弧度时，创建一个

const DEG2RAD=Math.PI/180。然后，您可以使用
var弧度=度*DEG2RAD或通过键入
constd2r=Math.PI/180保存或调用
const oneDeg=Math.PI/180
我不知道这是否是您正在寻找的，但不久前我进行了黑客攻击和示例，我做到了：谢谢，但遗憾的是没有。我需要向上按钮与图像一起旋转。