如何将任意数量的图像加载到画布上答案

【问题标题】：How to load any number of images onto canvas如何将任意数量的图像加载到画布上
【发布时间】：2016-10-10 12:48:23
【问题描述】：

如何将任意数量的图像加载到画布上。数字可以是 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>

【问题讨论】：

for...in...
用户输入任意数字然后相应地加载图像例如用户输入5然后加载5个图像。

标签： javascript html html5-canvas

【解决方案1】：

将相关数据保存为对象列表并循环遍历它们：

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() {
	//Clear board
	context.clearRect(-10, -10, 4000, 4000);
	//Loop through images and draw each one
	for (var i = 0; i < sourceSets.length; i++) {
		context.drawImage(sourceSets[i].img, sourceSets[i].x, sourceSets[i].y, sourceSets[i].w, sourceSets[i].h);
	}
}

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

&lt;canvas id="myCanvas" width="600" height="540"&gt;&lt;/canvas&gt;

【讨论】：

如果我有一组图像。？比如 var availableTags = ;那我怎么加载图片
取决于$img_arr1 中的项目的外观。
我有一个 json 数组。包含图片
foreach($img_arr1 as $img){ echo 'loadSource("' . $img . '"); '; }