[ERLEDIGT]Javascript und Canvas: Schleife hängt Browser auf!

Webdesign & Technik HTML & CSS
1

Schönen guten Tag,
Derzeit habe ich ein Problem mit dem erstellen einer Schleife, welche wiederum einen Hintergrund zeichnet.

Gesamte HTML Datei ohne Schleife (Funktioniert):

<!DOCTYPE html>
<html>
	<head>
		<title>UI</title>
	</head>
	<body>
		<canvas id="canv1" width="450" height="450">
		Canvas wird von deinem Browser nicht unterstützt!
		</canvas>
		<p>HTML5 Canvas und Javascript Demo von *schnips*. </p>
		<script>
		//Interna
		var canvas = window.document.getElementById("canv1");  
		if(canvas.getContext) {
			var ctx = canvas.getContext('2d');
			
			drawUI();
		} else {
			//*
			alert("Ihr Browser unterstützt leider kein HTML5 Canvas!");
			//*/
			//Fallback
		}
		
		function drawUI() {
			ctx.beginPath();

			ctx.save();
			ctx.moveTo(0, 0);
			for(i=0; i != 7; i++) {
				if(i == 0) {
					ctx.moveTo(50, 0);
				} else {
					ctx.lineTo(50, 0);
				}
				
				
				ctx.rotate(2*Math.PI/360*60);
			}
			
			ctx.restore();
			ctx.moveTo(0, 0);
			ctx.translate(80, 45);
			
			ctx.save();
			ctx.moveTo(0, 0);
			for(i=0; i != 7; i++) {
				if(i == 0) {
					ctx.moveTo(50, 0);
				} else {
					ctx.lineTo(50, 0);
				}
				
				ctx.rotate(2*Math.PI/360*60);
			}
			ctx.restore();
			
			ctx.moveTo(0, 0);
			ctx.translate(80, -45);
			
			ctx.save();
			ctx.moveTo(0, 0);
			for(i=0; i != 7; i++) {
				if(i == 0) {
					ctx.moveTo(50, 0);
				} else {
					ctx.lineTo(50, 0);
				}
				
				ctx.rotate(2*Math.PI/360*60);
			}
			
			ctx.lineWidth = 1;
			ctx.stroke();
		}
		</script>
	</body>
</html>

Der folgende Teil soll in eine Schleife:

			ctx.save();
			ctx.moveTo(0, 0);
			for(i=0; i != 7; i++) {
				if(i == 0) {
					ctx.moveTo(50, 0);
				} else {
					ctx.lineTo(50, 0);
				}
				
				ctx.rotate(2*Math.PI/360*60);
			}
			
			ctx.restore();
			ctx.moveTo(0, 0);
			ctx.translate(80, 45);
			
			ctx.save();
			ctx.moveTo(0, 0);
			for(i=0; i != 7; i++) {
				if(i == 0) {
					ctx.moveTo(50, 0);
				} else {
					ctx.lineTo(50, 0);
				}
				
				
				ctx.rotate(2*Math.PI/360*60);
			}
			ctx.restore();
			
			ctx.moveTo(0, 0);
			ctx.translate(80, -45);
			
			ctx.save();
			ctx.moveTo(0, 0);
			for(i=0; i != 7; i++) {
				if(i == 0) {
					ctx.moveTo(50, 0);
				} else {
					ctx.lineTo(50, 0);
				}
				
				ctx.rotate(2*Math.PI/360*60);
			}

Diesen Code habe ich geschrieben:

for(i = 0; i!= 5; i++) {
	ctx.save();
	ctx.moveTo(0, 0);
	for(i=0; i != 7; i++) {
		if(i == 0) {
			ctx.moveTo(50, 0);
		} else {
			ctx.lineTo(50, 0);
		}
		
		ctx.rotate(2*Math.PI/360*60);
	}

	ctx.restore();
	ctx.moveTo(0, 0);
	
	if(i % 2 == 0) {
		ctx.translate(80, 45);
	} else {
		ctx.translate(80, -45);
	}
}

Leider verursacht dieser aus einem mir nicht bekannten Grund Probleme. Ich hoffe auf eure Unterstützung!

Mit freundlichen Grüßen,
Seoson

2

Ich habe zwar weder von javascript noch von canvas Ahnung,
außer daß zu letzterem schon im Arbeitsentwurf steht, man sollte
besser etwas verwenden, was zugänglich ist, hier täte ich aber
mindestens empfehlen, den Laufparameter der inneren for-Schleife
umzubenennen.
Es ist nicht besonders sinnvoll, in einer for-Schleife mit
Laufparameter i eine weitere for-Schleife mit
Laufparameter i zu notieren. Ich glaube, fortgeschrittene
Programmiersprachen führen sowas heutzutage nicht mehr aus
sondern hauen eine Fehlermeldung raus.

Wenn das ähnlich funktioniert wie in PHP mit der for-Schleife,
tritt in der äußeren Schleife i==5 nie auf, weil die innere
Schleife i immer mit 7 beendet…

3

Vielen Dank! Ich bin von einem falschen gültigkeits Modell ausgegangen. Der Fehler ist behoben.