如何將任意數量的圖像加載到畫布上

-2

如何將任意數量的圖像加載到畫布上。該數字可以是5,6 ...我怎麼做到這一點。到目前爲止，我只能夠加載2圖像，但這種代碼將不適用於動態圖像數量。代碼應該是這樣的，它應該加載許多圖像。如何將任意數量的圖像加載到畫布上

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
     body { 
      margin: 0px; 
      padding: 0px; 
     } 
    </style> 
</head> 
<body> 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
    <script> 
     function loadImages(sources, callback) { 
      var images = {}; 
      var loadedImages = 0; 
      var numImages = 0; 
    // get num of sources 
    for(var src in sources) { 
     numImages++; 
    } 
    for(var src in sources) { 
     images[src] = new Image(); 
     images[src].onload = function() { 
      if(++loadedImages >= numImages) { 
       callback(images); 
      } 
     }; 
     images[src].src = sources[src]; 
    } 
} 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
//var availableTags = <?php echo json_encode($img_arr1) ?>; 

var sources = { 
    darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg', 
    yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg' 

}; 

loadImages(sources, function(images) { 
    context.drawImage(images.darthVader, 100, 30, 200, 137); 
    context.drawImage(images.yoda, 350, 55, 93, 104); 
}); 

</script> 
</body> 
</html>

來源

2016-10-10 Faizan

['爲... ...在']（https：//開頭開發商。 mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in） – Andreas

用戶將輸入任意數字，然後相應的圖像將被加載，例如，用戶將輸入5，然後將加載5個圖像。 – Faizan

保存相關數據作爲對象的列表和循環通過他們：

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
//var availableTags = <?php echo json_encode($img_arr1) ?>; 
 
var sourceSets = []; 
 
var sources = {}; 
 
//Draw function 
 
function draw() { 
 
\t //Clear board 
 
\t context.clearRect(-10, -10, 4000, 4000); 
 
\t //Loop through images and draw each one 
 
\t for (var i = 0; i < sourceSets.length; i++) { 
 
\t \t context.drawImage(sourceSets[i].img, sourceSets[i].x, sourceSets[i].y, sourceSets[i].w, sourceSets[i].h); 
 
\t } 
 
} 
 

 
function loadSource(src, x, y, w, h) { 
 
\t //Setting defaults 
 
\t if (src === void 0) { 
 
\t \t src = ''; 
 
\t } 
 
\t if (x === void 0) { 
 
\t \t x = 0; 
 
\t } 
 
\t if (y === void 0) { 
 
\t \t y = 0; 
 
\t } 
 
\t if (w === void 0) { 
 
\t \t w = 100; 
 
\t } 
 
\t if (h === void 0) { 
 
\t \t h = 100; 
 
\t } 
 
\t //Creating image and loading from src 
 
\t if(sources[src] === void 0) { 
 
\t \t sources[src] = new Image(); 
 
\t \t sources[src].onload = function() { 
 
\t \t \t draw(); 
 
\t \t }; 
 
\t \t sources[src].src = src; 
 
\t } 
 
\t var img = sources[src]; 
 
\t img.src = src; 
 
\t //Save all relevant data in an object 
 
\t sourceSets.push({ 
 
\t \t src : src, 
 
\t \t x : x, 
 
\t \t y : y, 
 
\t \t w : w, 
 
\t \t h : h, 
 
\t \t img : img 
 
\t }); 
 
} 
 
//Add whatever amount of images here 
 
var amount = parseInt(prompt("amount",4)); 
 
for(var i = 0; i < amount; i++) { 
 
\t if(i%2 === 0) { 
 
\t \t loadSource('http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg', Math.random() * 400, Math.random() * 400, 200, 137); 
 
\t } else { 
 
\t \t loadSource('http://www.html5canvastutorials.com/demos/assets/yoda.jpg', Math.random() * 400, Math.random() * 400, 93, 104); 
 
\t } 
 
}

<canvas id="myCanvas" width="600" height="540"></canvas>

來源

2016-10-10 13:05:05

如果我有一組圖像。？像var availableTags = <？php echo json_encode（$ img_arr1）？>;那麼我如何加載圖像 – Faizan

取決於'$ img_arr1'中的項目的外觀。 –

我有一個json數組。收集圖像 – Faizan

如何將任意數量的圖像加載到畫布上

回答

相關問題