Elemente in Canvas bewegen, ohne neu zu zeichnen

chricken

Mitglied
Hi,
ich arbeite mich grad in das Thema Canvas ein und habe da ein massives Problem.
Ich erstelle nämlich eine Diashow, welche die Bilder aus dem sichtbaren Bereich heraus schieben soll.
Dazu muss ich jedes Bild innerhalb des Canvas einzeln verschieben können.
Mein bisheriger Code war so aufgebaut, dass mit Hilfe eines Intervalls die Zeichenfunktion aufgerufen wird. Diese kopiert zunächst das nächste Bild in einen neuen Context als Hintergrund. Dann wird das vordere Bild (welches weggewischt wird) an die gewünschte Position kopiert, welche sich ändert.
Das Problem ist nun, dass das ständige Kopieren, Skalieren und Zuschneiden zu langsam ist. Mit einem einzelnen Bild geht es grade noch, aber später will ich das Bild dynamisch verzerren, in Streifen schneiden und vieles mehr.
Deshalb wünsche ich eine Möglichkeit, ein Bild einmal kopieren, skalieren und zuschneiden zu müssen und dann nur noch das fertige Element (bzw die fertigen Elemente) zu bewegen.
Hoffentlich kann jemand helfen, das wäre großartig.

Vielen Dank
Chricken

Wen es interessiert, mein bisheriger Code:
HTML:
<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    #leinwand {
      position:relative;
      margin-left:5px;
      margin-right:5px;
      margin-top:5px;
      border:#000 1px solid;
      background:#fff;
      
    }
	#bilder {
		border:#f00 1px solid;
		position:absolute;
		visibility:hidden;
	}
	#weiter {
		background:#fa8;
		width:200px;
		height:200px;
		padding:50px;
		font-size:30px;
	}
  </style>
  
  <script type="application/javascript">
  var canvas;
  var ctx;
  var img;
  var anz_bilder=4;
  var bildbreite=800; //Breite des Bildes
  var bildhoehe=400; //Höhe des Bildes
  
  var posx=0; //Position, welche das Vordergrundbild gerade inne hat
  var posy=0;
  var id_move;
  
	var img = new Image();   // Create new img element 
  	function init(){
		//Alles vorbereiten
		canvas = document.getElementById("leinwand"); 
		ctx = canvas.getContext("2d");
		draw(1);
  	}
	function draw(i){
		ctx.clearRect(0,0,canvas.width,canvas.height);
		
		//Hintergrundbild
		if(i==1){
			img = document.getElementById("bild" + anz_bilder);
		}else{
			img = document.getElementById("bild" + (i-1));
		}
				
		if((img.width/img.height) >= (bildbreite/bildhoehe)){
			var temp = 0; //Um das Ursprungsbild zu zentrieren - ist noch nicht fertig.
			ctx.drawImage(img,temp,0,img.height/(bildhoehe/bildbreite),img.height,0,0,bildbreite,bildhoehe);
		}else{
			var temp = 0;
			ctx.drawImage(img,0,temp,img.width,img.width/(bildbreite/bildhoehe),0,0,bildbreite,bildhoehe);
		}
		
		//bewegtes Bild
		img = document.getElementById("bild" + i);
		if((img.width/img.height) >= (bildbreite/bildhoehe)){
			var temp = 0; //Um das Ursprungsbild zu zentrieren - ist noch nicht fertig.
			ctx.drawImage(img,temp,0,img.height/(bildhoehe/bildbreite),img.height,posx,posy,bildbreite,bildhoehe);
		}else{
			var temp = 0;
			ctx.drawImage(img,0,temp,img.width,img.width/(bildbreite/bildhoehe),posx,posy,bildbreite,bildhoehe);
		}
		posx += 3;
		
		//ggf slideshow stoppen
		if(posx > canvas.width){
			clearInterval(id_move);
		}
	}
	
	function move(i){
		//Slideshow starten
		id_move=setInterval(draw,20,i);
	}
  </script>
</head>
<body onLoad="init()">
<canvas id="leinwand" width="800" height="400"></canvas><br>
<div id="bilder">
<img src="bilder/bild1.jpg" width="480" height="640" id="bild1">
<img src="bilder/bild2.jpg" width="640" height="384" id="bild2">
<img src="bilder/bild3.jpg" width="554" height="554" id="bild3">
<img src="bilder/bild4.jpg" width="640" height="384" id="bild4">
</div>
<div id="weiter" onClick="move(1);">
Klick mich
<div>
</body>
</html>
 
Erstell dir mehrere canvas Elemente (document.createElement) und halte dort die skalierten Bilder bereit. Dann kannst du die eine canvas auf die andere Zeichnen. drawImage akzeptiert als ersten Parameter auch ein anderes canvas Element.
 
Vielen Dank für den Tipp.
Ich stelle aber grad fest, dass meine Angst unbegründet war.
Als ich anfing sah es noch zweifelhaft aus, aber nun habe ich die Bilder spasseshalber in 60 * 60 Einzelteile zerschnitten, und es läuft einwandfrei auf Standard-PC-Hardware Inklusive Fading, Rotation, etc.
Bin ziemlich beeindruckt von der Performance des Canvas-Elementes (auch wenn Flash immer noch um den Fakter 3-5 schneller ist ;) )

Lieben Gruß
Chricken
 
Zurück