与画布壁碰撞后的翻转图像

Question

我遇到了一个我无法真正解决的小问题。我在画布上加载了一个小图标图像，该图像在弹跳。一切工作正常，除非此图标碰到右画布墙，该图像应水平翻转并保持其状态，但是context.scale（-1,1）仅翻转图标一秒钟并返回到初始状态。

更新：这里是完整的代码

<script type="text/javascript">
		window.addEventListener('load', canvasApp, false);
		
		function canvasApp() {
			if (!document.createElement('canvas').getContext) {
				return;
			}
			
			var theCanvas = document.getElementById('canvas');
			var context = theCanvas.getContext('2d');
			
			var angle = -45;							//Startwinkel
			var gravity = .1;							//Schwerkraft
			var groundY = theCanvas.height - 50;		//Hoehe des Bodens
			var startX = theCanvas.width / 2;			//x-Komponente der Startposition
			var startY = theCanvas.height / 4;			//y-Komponente der Startposition
			var step = 3;								//Schrittgroesse
			
			//Eigenschaften des Characters
			var character = {
				x: startX,										//x-Position
				y: startY,										//y-Position
				vx: step * Math.cos(angle * Math.PI / 180),		//Geschwindigkeit in x-Richtung
				vy: step * Math.sin(angle * Math.PI / 180),		//Geschwindigkeit in y-Richtung
				elasticity: 0.95								//Elastizitaet
			};
			
			//Image-Objekte erstellen
			var creatureImg = new Image();
			var groundImg = new Image();
			
			//Callback fuer Ladevorgang hinzufuegen
			//...
			//Callback fuer ground.png
			groundImg.onload = function() {
				context.drawImage(onItemLoaded());
				notify();
			};

			//Callback fuer creature.png
			creatureImg.onload = function() {
				context.drawImage(onItemLoaded());
				notify();
			};

			//Anzahl der zu ladenen Bilder
			var numImages = 2;
			
			//Counter fuer Ladevorgang der Bilder, wird in onItemLoaded() hochgezaehlt
			var imgLoadCount = 0;
			
			//Bilder laden
			creatureImg.src = "creature.png";
			groundImg.src = "ground.png";
			
			//Variablen fuer Abmasse des Characters
			//nach Abschliessen des Ladevorgangs setzen
			var creatureWidth;
			var creatureHeight;
			
			function drawCanvas() {
				//Hintergrund
				context.fillStyle = '#EEEEEE';
				context.fillRect(0, 0, theCanvas.width, theCanvas.height);
				
				//Schwerkraft
				character.vy += gravity;
				
				//Kollision Boden
				if (character.y + creatureHeight / 2 >= groundY) {
					character.vy *= -1;								//Abprallen
					character.vy *= character.elasticity;			//Elastizitaet anwenden
					character.y = groundY - creatureHeight / 2;		//Position korrigieren
				}
				
				if (character.x + creatureWidth >= theCanvas.width) {	//Kollision rechte Wand
					step = -3;											//Abprallen
					character.vx *= + 1;								//Elastizitaet anwenden
					character.x = theCanvas.width - creatureWidth;		//Position korrigieren
				}
				else if (character.x <= 0) {							//Kollision linke Wand
					step = + 3;											//Abprallen
					character.vx *= - 1;								//Elastizitaet anwenden
					character.x = 0;									//Position korrigieren
				}
				
				character.x = character.x + step;

				//Position aktualisieren
				character.x += character.vx;
				character.y += character.vy;
				
				//Character zeichnen
				drawCharacter();
				
				//Boden zeichnen
				drawGround();
			}
			
			function drawCharacter() {
				//Berechnung der Icongroessen widht & height
				creatureWidth = creatureImg.width;
				creatureHeight = creatureImg.height

				context.save();
				context.translate(character.x, character.y);
				
				//Bewegungsrichtung des Characters
				var direction = character.vx / Math.abs(character.vx);
				//Ausrichtung des Characters ueber Skalierungstransformation
				//...
				if(character.x + creatureWidth >= theCanvas.width) {
				//if(character.x + creatureHeight >= theCanvas.width) {
					context.scale(-1, 1);





					
				}

				//context.drawImage(creatureImg, ..., ...);
				context.drawImage(creatureImg, 0, 0, creatureWidth, creatureHeight);
				context.restore();
			}
			
			function drawGround() {
				//Boden mit ground.png zeichnen
				//...
				context.drawImage(groundImg, 0, groundY, 500, 176);
			}
			
			function renderingLoop() {
				requestAnimationFrame(renderingLoop);
				drawCanvas();
			}
			
			function onItemLoaded() {
				imgLoadCount++;
				if (imgLoadCount == numImages) {					//Bilder geladen
					//...
					renderingLoop();								//Den Geist animieren
				}
			}
		}
	</script>

Answer 1

我更新了上面的代码。......