Question

我是初学者，并且有一个问题：我有不想更改的背景，但是我想垂直（上下）切换图片。我希望能够在动画制作过程中的某些时候将角色（乌龟）颠倒过来有人可以帮我吗

这是我的代码的一部分

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var imgbackground = new Image();
img.src = 'BG.png';
ctx.drawImage(img, 0, 0, 457, 542);

var turtle = new Image(); // My character
turtle.src = 'turtle.png';
ctx.drawImage(turtle, 0, 0, 457, 542);

function gameTime (){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imgbackground, 0, 0, 900, 500);
    ctx.drawImage(turtle, 0, 0, 900, 500);

    window.requestAnimationFrame(gameTime)

}
window.requestAnimationFrame(gameTime)

Answer 1

因此您可以使用scale（1，-1）垂直翻转某些内容：

var canvas = document.getElementById('myCanvas')
var context = canvas.getContext('2d');
context.scale(1, -1);

重要的部分是.scale，它会将-1的Y值翻转，上下文将是元素，因此将其更改为所需的元素。

 so try turtle.scale(1, -1)

-翻转你可爱的乌龟。

您还可以使用（-1，1）水平翻转东西-影响x值。

画布垂直变换

1 个答案: