Javascript 如何使用js更改画布中对象的css属性？

我正在做一个游戏，我面临一个问题。当我的角色向左移动时，我需要反转，我不能创建一个反转图像并使用它，我不能反转画布，因为我会有一些新角色，它们不应该反转。一种方法是引用我的角色css属性并使用js添加如下内容：

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

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


箭在弦上

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var-lifes=700；
var fon=新图像（）；
fon.src=”https://i.stack.imgur.com/HjXpq.jpg";
var life_red=新图像（）；
life_red.src=”https://i.stack.imgur.com/sGZ7l.jpg";
var life_green=新图像（）；
life_green.src=”https://i.stack.imgur.com/9eWXX.jpg";
var iron_man_img=新图像（）；//右行走的球员
铁人队https://i.stack.imgur.com/aeTtS.png';
var iron_man={
x:300，
y:50，
dx:100，
dy:0.1,，
dfly:500，
运行：0，//动画
运行速度：5，//动画速度
苍蝇：错，
飞行时间：0，
活着：真的
}
var键={}；
功能设置键（事件、状态）{
var代码=event.keyCode；
var键；
如果（代码==32）{
key=“空间”；
}否则如果（代码==37）{
key=“Left”；
}否则如果（代码==38）{
key=“Up”；
}否则如果（代码==39）{
key=“Right”；
}否则，如果（代码==40）{
key=“Down”；
}否则{
key=String.fromCharCode（代码）；
}
钥匙[钥匙]=状态；
}
文档.添加的事件列表器（'keydown'，函数（e）{
设置键（e，true）；
});
文件。添加的文件列表器（“键控”，功能（e）{
设置键（e，false）；
});
document.addEventListener（'blur'，function（）{
键={}；
});
函数isDown（键）{
返回键[键]；
}
iron\u man\u img.onload=函数（）{
last=日期。现在（）；
游戏（）；
}
函数游戏（）{
var now=Date.now（）；
var dt=（现在-最后一次）/1000；
更新（dt）；
render（）；
最后=现在；
游戏框架；
}
功能更新（dt）{
如果（isDown（“Right”）| | isDown（“D”））{
铁人跑步+=铁人跑步速度*dt；
铁人.x+=铁人.runspeed*dt*10；
}
如果（isDown（“左”）| | isDown（“A”））{
铁人跑步+=铁人跑步速度*dt；
铁人.x-=铁人.runspeed*dt*10；
}
//控制台日志（iron_man.runspeed*dt）；
}
函数render（）{
变量宽度=window.innerWidth；
var height=window.innerHeight；
//控制台。原木（宽度/高度）；
//控制台日志（700/500）；
如果（宽度/高度>700/500）{
$（'canvas'）.css（'height'，height）；
$（'canvas'）.css（'width'，height/500*700）；
}否则{
$（'canvas'）.css（'width'，width）；
$（'canvas'）.css（'height'，width/700*500）；
}
context.fillStyle=“绿色”；
curr_life=新图像（）；
curr_life.src=“Sprites/life_green.jpg”；
对于（var i=0；i<1800；i++）{//HP
if（i==lifes）{
curr_life.src=“Sprites/life_red.jpg”；
}
//drawImage（curr_life，240268，i，0，1，1）；
drawImage（curr_life，i，0，10，10）；
}
如果（寿命！=0）{
//生命--；
}
drawImage（fon，0，0，1000，1000）；
背景图（iron\u-man\u-img，44*（Math.round（iron\u-man.run）%8）+1.2,0,44,65，iron\u-man.x，iron\u-man.y，50,60）；
//控制台日志（铁人运行）；
//铁人x+=1；
//铁人x+=1；
}
var requestAnimFrame=（函数（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（回调）{
setTimeout（回调，50）；
};
})();
#画布{
背景颜色：浅蓝色；
保证金：0自动；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
显示：块；
填充：0；
}
身体{
溢出：隐藏；
}

画布在浏览器中不工作
好的，最好的方法是使用画布缩放，为了使其正常工作，我必须做一些更改，但我会尽力解释

为了记录方向，我添加了
iron_man.z
，并使用-1表示向左，1表示向右，这是因为缩放就是这样工作的

接下来，在
update（）
中，我们需要将
iron_man.z
设置为1或-1，具体取决于我们按下的键

现在是复杂的部分。我们运行
context.save（）
来记住所有设置，然后再使用translate和scale

我们必须翻译来设置刻度原点，我们希望原点是铁人的中心。要计算铁人.x+width/2和铁人.y+height/2（
context.translate（铁人.x+25，铁人.y+30）
），这意味着铁人的位置也需要不同，但我们需要先缩放

对于scale，我们只需要
iron_-man.z
，所以我们有这个
context.scale（iron_-man.z，1）

最后我们画了这个图像，因为我们已经把原点设置为铁人的中心，所以我们需要把x和y坐标放置在-（宽度/2），-（高度/2）

最后，我们希望使用
context.restore（）


var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var-lifes=700；
var fon=新图像（）；
fon.src=”https://i.stack.imgur.com/HjXpq.jpg";
var life_red=新图像（）；
life_red.src=”https://i.stack.imgur.com/sGZ7l.jpg";
var life_green=新图像（）；
life_green.src=”https://i.stack.imgur.com/9eWXX.jpg";
var iron_man_img=新图像（）；//右行走的球员
铁人队https://i.stack.imgur.com/aeTtS.png';
var iron_man={
x:300，
y:50，
z:-1，
dx:100，
dy:0.1,，
dfly:500，
运行：0，//动画
运行速度：5，//动画速度
苍蝇：错，
飞行时间：0，
活着：真的
}
var键={}；
功能设置键（事件、状态）{
var代码=event.keyCode；
var键；
如果（代码==32）{
key=“空间”；
控制台日志（铁人）
}否则如果（代码==37）{
key=“Left”；