• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Canvas-Zeichnungen werden nicht dargestellt?

C

CidCreaper

New member
Hei, ich würde gerne mit dem Canvas-Element ein HTML5-Spiel programmieren, aber es gibt leider ein Problem.
Wenn ich das Canvas-Element verwende werden die darauf gezeichneten Elemente nicht dargestellt, nur das Canvas-Element selbst.(Ausprobiert mit IE9, Firefox, Chrome und Safari.)
Ich habe es lokal versucht und auch ins Netz geladen, aber nichts passiert.

Hier mal ein kurzes Beispiel, vielleicht mache ich ja was falsch;

Code: 
<!DOCTYPE html>
<html>

<head>

	<script>

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

	function einstellen(farbe, x_anfang, y_anfang, x_breite, y_höhe){
		ctx.fillStyle = farbe;
		ctx.fillRect(x_anfang, y_anfang, x_breite, y_höhe);
	}

	einstellen("red", 0, 0, 50, 50);
	einstellen("blue", 50, 0, 50, 50);
	einstellen("red", 100, 0, 50, 50);
	einstellen("blue", 0, 50, 50, 50);
	einstellen("red", 50, 50, 50, 50);
	einstellen("blue", 100, 50, 50, 50);

	</script>

</head>

<body>

	<canvas id="mainCanvas" width="800" height="600" style="border:1px solid gray;">
		Dein Browser unterstützt das "Canvas"-Element nicht.
	</canvas>

</body>

</html>

und hier der Link; painproductions.bplaced.net
Ja ist bei bplaced, ich bin 15 und hab nicht genug Geld für ne eigene Domain :eek:

Auf der Seite vom W3C klappt das wunderbar, also glaube ich eher nicht, dass das was mit dem Code zu tun hat, aber vielleicht wisst ihr ja wieso das so ist :confused: :(
 
Die Fehlerkonsole verrät dir, was das Problem ist:
1. Keine Umlaute in Variablennamen verwenden.
2. Wenn das Skript ausgeführt wird, ist mainCanvas noch nicht definiert. Das kannst Du lösen, indem Du window.onload verwendest.
So funktioniert es:
Code: 
            window.onload = (function(){
                var mainCanvas = document.getElementById('mainCanvas');
                var ctx = mainCanvas.getContext('2d');
            
                function einstellen(farbe, x_anfang, y_anfang, x_breite, y_hoehe){
                    ctx.fillStyle = farbe;
                    ctx.fillRect(x_anfang, y_anfang, x_breite, y_hoehe);
                }
            
                einstellen("red", 0, 0, 50, 50);
                einstellen("blue", 50, 0, 50, 50);
                einstellen("red", 100, 0, 50, 50);
                einstellen("blue", 0, 50, 50, 50);
                einstellen("red", 50, 50, 50, 50);
                einstellen("blue", 100, 50, 50, 50);
            })
 
Also ich täte die Funktion außerhalb des anonymen Funktionsscope setzen und das canvas-Objekt als Parameter übergeben. Außerdem würde ich selbiges gleich mit JavaScript erzeugen:
Code: 
function einstellen(element, farbe, x_anfang, y_anfang, x_breite, y_hoehe){
  var ctx = element.getContext("2d");
  ctx.fillStyle = farbe;
  ctx.fillRect(x_anfang, y_anfang, x_breite, y_hoehe);
}

window.onload = function(){
  var canvas = document.createElement("canvas");
  canvas.width = 800;
  canvas.height = 600;
  canvas.style.border = "1px solid gray";
  document.body.appendChild(canvas);

  einstellen(canvas, "red", 0, 0, 50, 50);
  einstellen(canvas, "blue", 50, 0, 50, 50);
  einstellen(canvas, "red", 100, 0, 50, 50);
  einstellen(canvas, "blue", 0, 50, 50, 50);
  einstellen(canvas, "red", 50, 50, 50, 50);
  einstellen(canvas, "blue", 100, 50, 50, 50);
}
 
Julian schrieb:
Also ich täte die Funktion außerhalb des anonymen Funktionsscope setzen und das canvas-Objekt als Parameter übergeben.
Zum Vergrößern anklicken....
den context als parameter zu übergeben, bzw. die funktion + context + weitere funktionen ggf. an einem eigenem objekt zu bündeln ist ok, aber warum die funktion nach außen legen?
damit hast du nur eine globale variable mehr, gegen die variante im eventhandler spricht ja nichts.
man könnte, wenn man die funktion an anderer stelle nochmal brauchen sollte, eine weitere kapselung außenrum legen, hier ist es aber nicht nötig.
 
Ich täte die deswegen nach außen legen, weil man dann leicht darauf zugreifen kann,
hesst schrieb:
wenn man die funktion an anderer stelle nochmal brauchen sollte
Zum Vergrößern anklicken....
Aber du hast recht, das würde auch mit einer weiteren außen herum funktionieren; und ich weiß auch nicht, ob sie nochmal an anderer Stelle gebraucht wird.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben