canvas image array wird nicht angezeigt

MiezeKathi · 03.08.2013

Hallo!

ich habe noch immer ein Problem bei meinem kleinen Projekt.
Die Bilder im Array werden einfach nicht angezeigt und es gibt auch keine Fehlermeldung. Ich weiß nicht was ich falsch mache?

hier mal der bisherige Code:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type ="text/css" href="style.css"/>
<title>Einrichtungstool</title>
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
	var width = window.innerWidth;
	var height = window.innerHeight;

	function paint(){
		var objCanvas = document.getElementById("myCanvas");

  		if (objCanvas.getContext){
			//Grafikkontext
			var objContext = objCanvas.getContext("2d"), img, i, image_array = [];

			objCanvas.setAttribute("width",width);  
   			objCanvas.setAttribute("height",height);

			//index 0
			image_array.push("img/objects/kueche/spuele1.png");
			//index 1 			
			image_array.push("img/objects/kueche/spuele2.png"); 
			// usw.
			image_array.push("img/objects/kueche/spuele1_a2.png"); 
			image_array.push("img/objects/kueche/spuele2_a2.png"); 
			image_array.push("img/objects/kueche/herd1.png"); 
			image_array.push("img/objects/kueche/herd2.png"); 
			image_array.push("img/objects/kueche/herd1_a2.png"); 
			image_array.push("img/objects/kueche/herd2_a2.png"); 
			image_array.push("img/objects/kueche/arbeitsflaeche1.png"); 
			image_array.push("img/objects/kueche/arbeitsflaeche2.png"); 

      		for (i = 0; i < image_array.length; i++) {  
			    img = new Image();  
			    img.src = image_array[i];  
			    img.onload = (function(img, i){ // temporary closure to store loop 
      			return function () {          // variables reference 
        			objContext.drawImage(img,i*img.width,i*img.height);  
      			}  
    		}
			)(img, i);  
  		}  

			//console.log(image_array);

	window.onload =  function() {
		paint();
      }
}
};
</script>
</head>
<body>

<!-- TOOLBAR -->
	<div id="toolleiste">
		<ul>
				<li id="iconLi"><a href="index.html" title="Zurück"><img id="icon" src= "img/icons/zurueck.png" /></a></li> 
				<li id="iconLi"><img id="icon" src= "img/icons/drehen.png" title="Drehen"/></li>
				<li id="iconLi"><img id="icon" src= "img/icons/loeschen.png" title="Löschen" onClick="javascript:loeschen(event);"/></li> 
				<li id="iconLi"><img id="icon" src= "img/icons/speichern.png" title="Speichern"/></li> 
		</ul>
	</div>

	<!-- OBJECTBOX -->
	<div id="objectbox">
	<canvas id="myCanvas">Dein Browser unterstützt das <canvas>-Element nicht</canvas>
	</div>

	<div class="room">
	</div>

	<div id="footer">
	&copy; 2013, Theres Scheucher (mt111018), Katharina Spitzer (mt111036)
	</div>


</body>
</html>

wäre toll, wenn mir wieder wer weiterhelfen könnte! danke!

Duddle · 03.08.2013

AW: canvas image array wird nicht angezeigt

Wir sind hier nicht bei Python, wo die Einrückung die Codeblöcke bestimmt.
Schau dir mal an, wo die paint()-Funktion an window.onload gehängt wird ... jap, in paint() selbst.

Duddle

Curanai · 04.08.2013

AW: canvas image array wird nicht angezeigt

*dem Duddle die "you made my day"-Medaille um den Hals häng*

Ich hab jetzt gedacht, dass hier das "Problem" kommt, was ich mit einem fertigen Canvas nach Modifikation (Canvas bei Zweitaufbau [Ajax] leer) auch hatte ... aber das war ja schon fast ein Hinweis auf "wie debugge ich richtig?!" ...

Nix für ungut, Kathi - manchmal ist es zu viel Wald für einen Baum.

MiezeKathi · 06.08.2013

AW: canvas image array wird nicht angezeigt

Hallo!

Sry, hab den falschen Code raufgestellt

Bei diesem Code wird die paint() Funktion aussen aufgerufen und es funkt leider trotzdem nicht. Tipps?

HTML:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<title>Einrichtungstool</title>
</head>

<script type="text/javascript">

	var width = window.innerWidth;
	var height = window.innerHeight;

	function paint(){
		var objCanvas = document.getElementById('myCanvas');

  		if (objCanvas.getContext){
			//Grafikkontext
			var objContext = objCanvas.getContext('2d'), img, i, image_array = [];

			objCanvas.setAttribute('width',width);  
   			objCanvas.setAttribute('height',height);

			image_array.push("img/objects/kueche/spuele1.png");
			image_array.push("img/objects/kueche/spuele2.png"); 
			image_array.push("img/objects/kueche/spuele1_a2.png"); 
			image_array.push("img/objects/kueche/spuele2_a2.png"); 
			image_array.push("img/objects/kueche/herd1.png"); 
			image_array.push("img/objects/kueche/herd2.png"); 
			image_array.push("img/objects/kueche/herd1_a2.png"); 
			image_array.push("img/objects/kueche/herd2_a2.png"); 
			image_array.push("img/objects/kueche/arbeitsflaeche1.png"); 
			image_array.push("img/objects/kueche/arbeitsflaeche2.png"); 

      		for (i = 0; i < image_array.length; i++) {  
			    img = new Image();  
			    img.src = image_array[i];  
			    img.onload = (function(img, i){ // temporary closure to store loop 
      			return function () {          // variables reference 
        			objContext.drawImage(img,i*img.width,i*img.height);  
      			}  
    		})(img, i);  
  		}  

		// Falls es sich um einen IE handelt
        if(/MSIE/.test(navigator.userAgent) && !window.opera){
          // Elternelement erstellen (wg. Methode fixElement_)
          var objDiv = document.createElement("div");
          // Neues Canvas-Element einhängen
          objDiv.appendChild(objCanvas);

          // Falls das neue Element noch kein Pseudo-Element ist und
          // die Schnittstelle existiert
          if ((!objCanvas.getContext) && (typeof G_vmlCanvasManager != "undefined")) {
            // Über öffentliche Schnittstelle das Element manuell initialisieren
            objCanvas = G_vmlCanvasManager.initElement(objCanvas);
          }
        

		} else {
		//Sonstige Routinen falls Grafikkontext nicht unterstützt wird
		}

	}
	window.onload = function(){
        paint();
      }	    
</script>

<body
onLoad="loadObjects(objects)"
onmousedown="down(event)"
onmousemove="move(event)"
onmouseup="up(event)"
>

<!-- TOOLBAR -->
	<div id="toolleiste">
		<ul>
				<li id="iconLi"><a href="index.html" title="Zurück"><img id="icon" src= "img/icons/zurueck.png" /></a></li> 
				<li id="iconLi"><img id="icon" src= "img/icons/drehen.png" title="Drehen"/></li>
				<li id="iconLi"><img id="icon" src= "img/icons/loeschen.png" title="Löschen" onClick="javascript:loeschen(event);"/></li> 
				<li id="iconLi"><img id="icon" src= "img/icons/speichern.png" title="Speichern"/></li> 
		</ul>
	</div>

	<!-- OBJECTBOX -->
	<div id="objectbox">
	<canvas id="myCanvas"></canvas>
	</div>

	<div class="room">
	</div>

	<div id="footer">
	&copy; 2013 mt111018, mt111036
	</div>

</body>

<script src="jquery-1.8.2.min.js"></script>
<script src="canvas.js"></script>

</html>