Questo é il risultato
L'unico problema é che ogni tanto mi salta qualche immagine non caricandomela.codice:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>App</title> <script src="modernizr-1.6.min.js"></script> <script type="text/javascript"> window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } //Test del supporto del canvas (Tramite Modernizr) function canvasSupport() { return Modernizr.canvas; } //Applicazione lanciata al caricamento della pagina function canvasApp(){ if (!canvasSupport()) { return; } else{ var theCanvas = document.getElementById("canvas"); var context = theCanvas.getContext("2d"); } //Dichiarazione variabili globali var img = new Array(); var contatore = 0; var tilesXNr = 36, tilesYNr = 50; var zoomLevel = 0; var dimTiles = 100; //Caricamento IMG VerNico1.4 for (var x = 0; x < tilesXNr; x++) { img[x] = new Array(); for (var y = 0; y < tilesYNr; y++) { img[x][y] = new Image(); var imgName = y + "_" + x + ".jpg"; img[x][y].onload = imgLoaded; img[x][y].src = imgName; //alert(img[x][y].src); } } //////////////////////// //Funzioni //////////////////////// //ImgLoadedVerNico 1.4 function imgLoaded(){ if(contatore++ === tilesYNr) { drawScreen(); } } function drawScreen() { for (var x = 0; x < tilesXNr; x++){ for (var y = 0; y < tilesYNr; y++) { context.drawImage(img[x][y], y * dimTiles, x * dimTiles, dimTiles, dimTiles); } } } } </script> </head> <body> <div style="position: absolute; top: 10px; left: 10px;"> <canvas id="canvas" width="9000" height="4000"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>
Quindi nella tela ho qualche buco sparso qua e là.
Per il resto sarebbe bello poter automatizzare il fatto che se aumento il numero di immagini nella cartella, va a caricarmele finché non sono finite, senza definire in anticipo il numero di immagini da caricare.
È possibile farlo?????

Rispondi quotando