如何将CSS rotatex（）和rotatey（）添加到画布中的图像

Question

我正在尝试在jQuery中制作一个简单的帆布游戏，

基本上，我有一个无限的循环，它不断绘制播放器和背景：

loop = () => {
    $('#player').css("transform", "rotateX("+xr+"deg) rotateY("+yr+"deg)");
    ctx.fillStyle = 'gray';
    ctx.fillRect(0,0,400,400);
    ctx.drawImage(player, x, y, 50, 50);
    window.setTimeout(loop, 1);
}

然后我有一个开关语句，可以在播放器按下A和D按钮时改变播放器的XR和yr：

$(document).ready(()=>{
    loop();
    $(document).bind('keydown',(e)=>{
        switch(e.keyCode){
          case 65:
              //moving left (altering the xr and yr values)
              break;
          case 87:
              //moving up (altering the y and x values based on SIN and COS and player's XR and YR)
              break;
          etc...
        }
    });
});

我可以说它正在检测到键推定，因为当我在Switch语句中运行Console.log（）时，它会将某些内容打印到控制台上，

因此很明显，这是图像上绘制的图像的问题。

如果有人可以弄清楚如何将图像的CSS绘制到画布上，或者改变在画布的CSS中绘制的图像，那就太好了。

不，我在其他任何地方都没有找到任何答案。这个问题似乎还没有问过。

编辑：XR和YR是XROTATION和yROTATION变量。

Answer 1

显然，图像不会将其CSS保留在画布中，也无法添加它。没关系，猜猜我会尝试其他事情。

Answer 2

您不需要CSS，可以使用画布来完成所有操作，翻译和

const ctx = canvas.getContext("2d");
const { width: w, height: h } = canvas;

let x = (w - 50) >> 1, y = (h - 50) >> 1;
let angle = 0;

const Keys = {
  pressed: {},
  handleEvent({type, code}) {
    this.pressed[code] = type === "keydown"
  }
}

document.addEventListener("keydown", Keys);
document.addEventListener("keyup", Keys);

function update() {
  if (Keys.pressed["ArrowLeft"]) {
    --angle;
  }
  if (Keys.pressed["ArrowRight"]) {
    ++angle;
  }
}

function draw() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, w, h);
  ctx.translate(x + 25, y + 25);
  ctx.rotate(angle * Math.PI / 180 );
  ctx.drawImage(player, -25, -25, 50, 50);
  ctx.setTransform(1, 0, 0, 1, 0, 0);
}

let player = new Image();
player.src = "https://1.bp.blogspot.com/-ddkcnhuU07g/Vllq4DNohkI/AAAAAAAACHo/p8d9SZxOy-w/s1600/mship1.png";

requestAnimationFrame(function render() {
  update();
  draw();
  requestAnimationFrame(render);
})

<canvas id="canvas" width="320" height="240"></canvas>