当img为数组时，canvas画图像时只显示一个

[年秒]

	for (n = 0; n<8; n++) {
		var image = new Image();
		image.src = imgSrc[n];  //imgSrc为一个图片路径的数组。
		image.onload = function () {
			console.log(image);
			//创建canvas
			var oCan = document.createElement('canvas');
			$("#sR-div1").append(oCan);
			var context = oCan.getContext("2d");
			var imgHeight = this.height;
			var imgWidth = this.width;
			imgWidth = oCan.width;
			imgHeight = oCan.height;
			context.drawImage(image, 0, 0, imgWidth, imgHeight);
		}
	}

这个画出来的图片总是最后数组里的最后一个路径的图片，请问应该怎么解决，让它画出数组里其他的照片？

[天际的海浪]

	var imgs = [];
	for (n = 0; n<8; n++) {
		var image = new Image();
		imgs[n] = image;
		image.src = imgSrc[n];  //imgSrc为一个图片路径的数组。
		image.onload = function () {
			console.log(image);
			//创建canvas
			var oCan = document.createElement('canvas');
			$("#sR-div1").append(oCan);
			var context = oCan.getContext("2d");
			var imgHeight = this.height;
			var imgWidth = this.width;
			imgWidth = oCan.width;
			imgHeight = oCan.height;
			context.drawImage(image, 0, 0, imgWidth, imgHeight);
		}
	}

[天际的海浪]

	var imgs = [];
	for (n = 0; n<8; n++) {
		var image = new Image();
		imgs[n] = image;
		image.src = imgSrc[n];  //imgSrc为一个图片路径的数组。
		image.onload = function () {
			console.log(this);
			//创建canvas
			var oCan = document.createElement('canvas');
			$("#sR-div1").append(oCan);
			var context = oCan.getContext("2d");
			var imgHeight = this.height;
			var imgWidth = this.width;
			oCan.width = imgWidth;
			oCan.height = imgHeight;
			context.drawImage(this, 0, 0, imgWidth, imgHeight);
		}
	}

[年秒]

引用 2 楼 jslang 的回复:

	var imgs = [];
	for (n = 0; n<8; n++) {
		var image = new Image();
		imgs[n] = image;
		image.src = imgSrc[n];  //imgSrc为一个图片路径的数组。
		image.onload = function () {
			console.log(this);
			//创建canvas
			var oCan = document.createElement('canvas');
			$("#sR-div1").append(oCan);
			var context = oCan.getContext("2d");
			var imgHeight = this.height;
			var imgWidth = this.width;
			oCan.width = imgWidth;
			oCan.height = imgHeight;
			context.drawImage(this, 0, 0, imgWidth, imgHeight);
		}
	}

虽然console出来的路径确实不同，但是在canvas画出来的还是同一张图片...TAT...

[functionsub]

不会哦，楼上的代码已经没问题了。你自己看错了吧？ 你代码的问题就是每次drawimage的时候传入的是image这个变量，这个变量每次都会被重新赋值，所以画出来的都是最后那张图片。 改成this就没这问题了。

[年秒]

引用 4 楼 functionsub 的回复:

不会哦，楼上的代码已经没问题了。你自己看错了吧？ 你代码的问题就是每次drawimage的时候传入的是image这个变量，这个变量每次都会被重新赋值，所以画出来的都是最后那张图片。 改成this就没这问题了。

... ...确实是我看错了

[qq_35122362]

请问如果image是传来的数组时，可以用canvas绘制吗