如何使用js更改位于画布中的对象的CSS属性？

Question

我在做游戏，但遇到一个问题。当他向左移动时，我需要反转角色，我不能只创建反转图像并使用它，也不能反转画布，因为我将拥有一些新角色并且它们不会反转。一种方法是引用我的角色CSS属性，并使用js添加类似以下内容：

-webkit-transform: scaleX(-1);
transform: scaleX(-1);

我可以在画布上这样做吗？


^{用箭头移动}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var lifes = 700;

var fon = new Image();
fon.src = "https://i.stack.imgur.com/HjXpq.jpg";

var life_red = new Image();
life_red.src = "https://i.stack.imgur.com/sGZ7l.jpg";

var life_green = new Image();
life_green.src = "https://i.stack.imgur.com/9eWXX.jpg";

var iron_man_img = new Image(); // Player walking right
iron_man_img.src = 'https://i.stack.imgur.com/aeTtS.png';
var iron_man = {
  x: 300,
  y: 50,
  dx: 100,
  dy: 0.1,
  dfly: 500,
  run: 0, //animation
  runspeed: 5, // animation speed
  fly: false,
  timeforflying: 0,
  alive: true
}
var keys = {};

function setKey(event, status) {
  var code = event.keyCode;
  var key;
  if (code == 32) {
    key = "Space";
  } else if (code == 37) {
    key = "Left";
  } else if (code == 38) {
    key = "Up";
  } else if (code == 39) {
    key = "Right";
  } else if (code == 40) {
    key = "Down";
  } else {
    key = String.fromCharCode(code);
  }
  keys[key] = status;
}

document.addEventListener('keydown', function(e) {
  setKey(e, true);
});
document.addEventListener('keyup', function(e) {
  setKey(e, false);
});
document.addEventListener('blur', function() {
  keys = {};
});

function isDown(key) {
  return keys[key];
}
iron_man_img.onload = function() {
  last = Date.now();
  game();
}

function game() {

  var now = Date.now();
  var dt = (now - last) / 1000;
  update(dt);
  render();
  last = now;
  requestAnimFrame(game);
}

function update(dt) {
  if (isDown("Right") || isDown("D")) {
    iron_man.run += iron_man.runspeed * dt;
    iron_man.x += iron_man.runspeed * dt * 10;
  }
  if (isDown("Left") || isDown("A")) {
    iron_man.run += iron_man.runspeed * dt;
    iron_man.x -= iron_man.runspeed * dt * 10;
  }
  //console.log(iron_man.runspeed * dt);
}

function render() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  //console.log(width/height);
  //console.log(700/500);
  if (width / height > 700 / 500) {
    $('canvas').css('height', height);
    $('canvas').css('width', height / 500 * 700);
  } else {
    $('canvas').css('width', width);
    $('canvas').css('height', width / 700 * 500);
  }


  context.fillStyle = "green";
  curr_life = new Image();
  curr_life.src = "Sprites/life_green.jpg";
  for (var i = 0; i < 1800; i++) { // HP
    if (i == lifes) {
      curr_life.src = "Sprites/life_red.jpg";
    }
    //context.drawImage(curr_life, 240, 268, i, 0, 1, 1);
    context.drawImage(curr_life, i, 0, 10, 10);
  }
  if (lifes != 0) {
    //lifes--;
  }
  context.drawImage(fon, 0, 0, 1000, 1000);
  context.drawImage(iron_man_img, 44 * (Math.round(iron_man.run) % 8) + 1.2, 0, 44, 65, iron_man.x, iron_man.y, 50, 60);
  //console.log(iron_man.run);
  //iron_man.x+=1; 
  //iron_man.x+=1; 
}
var requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 50);
    };
})();

#canvas {
  background-color: lightblue;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  padding: 0;
}

body {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div align="center" class="canvas-div">
  <canvas id="canvas" width="700" height="500" style="border: 1px solid black" class="canvas">
    Canvas is not working in your browser
  </canvas>
</div>

Answer 1

正确的是，最好的方法是使用画布比例尺，为了使其正常工作，必须进行一些更改，但是我将尽我所能来解释它们。

为了保持方向感，我添加了iron_man.z并使用-1表示左侧，而1表示右侧，因为这是缩放的原理。

接下来，在update()中，我们需要根据所按的键将iron_man.z设置为1或-1。

现在输入复数位。在运行平移和缩放之前，我们运行context.save()来记住所有设置。

我们必须转换以设置比例原点，我们希望原点成为钢铁侠的中心。要计算出我们执行iron_man.x + width / 2和iron_man.y + height / 2（context.translate(iron_man.x + 25, iron_man.y + 30)），这意味着Ironman的位置也需要有所不同，但是我们需要先缩放。

对于规模，我们只需要iron_man.z，所以我们有context.scale(iron_man.z,1)。

最后我们绘制图像，因为将原点设置为钢铁侠的中心，所以我们需要将x和y坐标放在-（width / 2），-（height / 2）。

最后，我们要使用context.restore()

恢复画布

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var lifes = 700;

var fon = new Image();
fon.src = "https://i.stack.imgur.com/HjXpq.jpg";

var life_red = new Image();
life_red.src = "https://i.stack.imgur.com/sGZ7l.jpg";

var life_green = new Image();
life_green.src = "https://i.stack.imgur.com/9eWXX.jpg";

var iron_man_img = new Image(); // Player walking right
iron_man_img.src = 'https://i.stack.imgur.com/aeTtS.png';
var iron_man = {
  x: 300,
  y: 50,
  z: -1,
  dx: 100,
  dy: 0.1,
  dfly: 500,
  run: 0, //animation
  runspeed: 5, // animation speed
  fly: false,
  timeforflying: 0,
  alive: true
}
var keys = {};

function setKey(event, status) {
  var code = event.keyCode;
  var key;
  if (code == 32) {
    key = "Space";
    console.log(iron_man)
  } else if (code == 37) {
    key = "Left";
  } else if (code == 38) {
    key = "Up";
  } else if (code == 39) {
    key = "Right";
  } else if (code == 40) {
    key = "Down";
  } else {
    key = String.fromCharCode(code);
  }
  keys[key] = status;
}

document.addEventListener('keydown', function(e) {
  setKey(e, true);
});
document.addEventListener('keyup', function(e) {
  setKey(e, false);
});
document.addEventListener('blur', function() {
  keys = {};
});

function isDown(key) {
  return keys[key];
}
iron_man_img.onload = function() {
  last = Date.now();
  game();
}

function game() {

  var now = Date.now();
  var dt = (now - last) / 1000;
  update(dt);
  render();
  last = now;
  requestAnimFrame(game);
}

function update(dt) {
  if (isDown("Right") || isDown("D")) {
    iron_man.run += iron_man.runspeed * dt;
    iron_man.x += iron_man.runspeed * dt * 10;
    iron_man.z = 1;
  }
  if (isDown("Left") || isDown("A")) {
    iron_man.run += iron_man.runspeed * dt;
    iron_man.x -= iron_man.runspeed * dt * 10;
    iron_man.z = -1;
  }
  //console.log(iron_man.runspeed * dt);
}

function render() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  //console.log(width/height);
  //console.log(700/500);
  if (width / height > 700 / 500) {
    $('canvas').css('height', height);
    $('canvas').css('width', height / 500 * 700);
  } else {
    $('canvas').css('width', width);
    $('canvas').css('height', width / 700 * 500);
  }


  context.fillStyle = "green";
  curr_life = new Image();
  curr_life.src = "Sprites/life_green.jpg";
  for (var i = 0; i < 1800; i++) { // HP
    if (i == lifes) {
      curr_life.src = "Sprites/life_red.jpg";
    }
    //context.drawImage(curr_life, 240, 268, i, 0, 1, 1);
    context.drawImage(curr_life, i, 0, 10, 10);
  }
  if (lifes != 0) {
    //lifes--;
  }
  context.drawImage(fon, 0, 0, 1000, 1000);
  context.save();
  context.translate(iron_man.x + 25, iron_man.y + 30);
  context.scale(iron_man.z, 1);
  context.drawImage(iron_man_img, 44 * (Math.round(iron_man.run) % 8) + 1.2, 0, 44, 65, -25, -30, 50, 60);
  context.restore();
  //console.log(iron_man.run);
  //iron_man.x+=1; 
  //iron_man.x+=1; 
}
var requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 50);
    };
})();

#canvas {
  background-color: lightblue;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  padding: 0;
}

body {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div align="center" class="canvas-div">
  <canvas id="canvas" width="700" height="500" style="border: 1px solid black" class="canvas">
    Canvas is not working in your browser
  </canvas>
</div>