キャンバスに任意の数の画像を読み込む方法

-2

どのようにキャンバスに任意の数の画像を読み込むのですか？数は5,6にすることができます...どのように私はthat.Soを行うことができます私は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

キャンバスに任意の数の画像を読み込む方法

答えて

関連する問題