mehrere Canvas anordnen

plammy · 31 Juli 2012

Hallo zusammen... Ich habe folgendes vor, aber ich komme einfach nicht weiter.. Ich will 4 Canvas haben, in jedem Canvas will ich ein image reinladen. Dann will die Canvas folgendermaßen anordnen:

___________
| |
|__________ |

also obere linie ist canvas nr.1, rechte linie ist canvas nr.2, linke linie canvas nr.3 untere linie canvas nr.4
das prblem ist aber dass die sich voll komisch immer anordnen nämlich SO:

|
|___________
|
___________|

also fängt jedes Canvas am ende der Anderen.. wie kann man das problem umgehen?

HTML:

<body>       
<canvas id="canvas_links" width="1220" height="645"></canvas>    
<canvas id="canvas_oben" width="980" height="90"></canvas>    
<canvas id="canvas_unten" width="980" height="90"></canvas>        
<canvas id="canvas_rechts" width="120" height="645"></canvas>

<script type="text/javascript">     
     function drawCanvasLinks(){        
var canvas_l = document.getElementById("canvas_links");        
var context = canvas_l.getContext("2d");        
context.fillStyle="#663366";        
context.fillRect(0,0,120,645);              
}      
document.getElementById("canvas_links").innerHTML=drawCanvasLinks(); 
            
function drawCanvasOben(){       
 var canvas_o = document.getElementById("canvas_oben");        
var context = canvas_o.getContext("2d");          
context.fillStyle="#663366";          
context.fillRect(0,0,980,90);      
}      

document.getElementById("canvas_oben").innerHTML=drawCanvasOben();  
 
function drawCanvasUnten(){        
var canvas_u = document.getElementById("canvas_unten");        
var context = canvas_u.getContext("2d");        
context.fillStyle="#663366";          
context.fillRect(0,0,980,90);      
}         

document.getElementById("canvas_unten").innerHTML=drawCanvasUnten();            function drawCanvasRechts(){        
var canvas_r = document.getElementById("canvas_rechts");       
 var context = canvas_r.getContext("2d");        
context.fillStyle="#663366";        
context.fillRect(0,0,120,645);   
          document.getElementById("canvas_r").innerHTML=drawCanvasRechts();    
    </script>        </body>

mehrere Canvas anordnen

plammy

Neues Mitglied

Neueste Beiträge