Antworten auf deine Fragen:
Neues Thema erstellen

canvas image array wird nicht angezeigt

MiezeKathi

Noch nicht viel geschrieben

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

Posting-Frequenz: 14µHz

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

Aktives Mitglied

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?!" ... :D

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

MiezeKathi

Noch nicht viel geschrieben

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>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben