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:
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>