如何将不同的图像（从同一画布生成）绘制到另一个画布？答案

【问题标题】：How to draw different images (generated from the same canvas) to another canvas?如何将不同的图像（从同一画布生成）绘制到另一个画布？
【发布时间】：2017-10-26 18:31:45
【问题描述】：

我想将几个不同的元素（图片来自canvasAux）添加到一个数组并在canvas 上绘制它们，但是当添加第二个项目时，第一个项目的图像也会改变（依此类推）。如何解决这个问题，让每个元素可以有不同的图像？

下面的例子：

步骤：点击“添加”，然后再次点击“更改”和“添加”（或再次点击“添加”、“添加”、“更改”和“添加”）。如何将第一个元素与 Google 徽标保持一致，而将其他元素与 Yahoo 徽标（或任何其他）保持一致？

window.onload = function() {
	var canvas = document.getElementById("canvas");
	var canvasAux = document.getElementById("canvasAux");

	var context = canvas.getContext("2d");
	var contextAux = canvasAux.getContext("2d");

	var add = document.getElementById("add");
	var change = document.getElementById("change");

	var elements = [];

	function drawElements() {
		context.clearRect(0, 0, canvas.width, canvas.height);

		for(var i = 0; i < elements.length; i++) {
			context.drawImage(elements[i].image, elements[i].x, elements[i].y, elements[i].width, elements[i].height);
		}
	}

	var imageDefault = new Image();
	imageDefault.src = "https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";

	imageDefault.onload = function() {
		contextAux.drawImage(imageDefault, 0, 0, canvasAux.width, canvasAux.height);
	}

	change.addEventListener("click", function() {
		var imageAux = new Image();
		imageAux.src = "https://s.yimg.com/zz/nn/lib/metro/g/my/yahoo_en-US_f_p_190x45_2x.png";

		imageAux.onload = function() {
			contextAux.clearRect(0, 0, canvasAux.width, canvasAux.height);
			contextAux.drawImage(imageAux, 0, 0, canvasAux.width, canvasAux.height);
		}
	});

	var x = 0;

	add.addEventListener("click", function() {
		var element = {
			image: canvasAux,
			width: 163,
			height: 191,
			x: x,
			y: 0
		};

		elements.push(element);

		x += 170;

		drawElements();
	});
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="background-color: #333;">
	<button id="add">Add</button> <button id="change">Change</button>

	<canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

	<canvas id="canvasAux" width="163" height="191" style="border: 1px solid #ccc;"></canvas>
  </body>
</html>

【问题讨论】：

嗯，你只有一个canvasAux 元素，所以当你修改它时，嗯......它被修改了......所有elements 都指向同一个修改后的画布。为什么不直接将new Image 存储在element 对象中？
@Kaiido 但它们已经存储在var element = {image: canvasAux 对象上...我真的需要这样做，因为在canvasAux 元素中我操纵了选择的图像（我只是没有添加它在示例中以使其易于理解“问题”）。我发现这种行为很奇怪，因为每个对象都有自己的“图像”值。
不，它们没有，它们都指向 same <canvas> 元素。如果您对画布进行了一些修改，则为每个 element 存储一个新画布。快速重构：jsfiddle.net/fvtk0eLn

标签： javascript html canvas html5-canvas drawimage

【解决方案1】：

我解决了这个问题，只是在每次add 点击时创建一个新的画布元素：

window.onload = function() {
	var canvas = document.getElementById("canvas");
	var canvasAux = document.getElementById("canvasAux");

	var context = canvas.getContext("2d");
	var contextAux = canvasAux.getContext("2d");

	var add = document.getElementById("add");
	var change = document.getElementById("change");

	var elements = [];

	function drawElements() {
		context.clearRect(0, 0, canvas.width, canvas.height);

		for(var i = 0; i < elements.length; i++) {
			context.drawImage(elements[i].image, elements[i].x, elements[i].y, elements[i].width, elements[i].height);
		}
	}

	var imageDefault = new Image();
	imageDefault.src = "https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";

	imageDefault.onload = function() {
		contextAux.drawImage(imageDefault, 0, 0, canvasAux.width, canvasAux.height);
	}

	change.addEventListener("click", function() {
		var imageAux = new Image();
		imageAux.src = "https://s.yimg.com/zz/nn/lib/metro/g/my/yahoo_en-US_f_p_190x45_2x.png";

		imageAux.onload = function() {
			contextAux.clearRect(0, 0, canvasAux.width, canvasAux.height);
			contextAux.drawImage(imageAux, 0, 0, canvasAux.width, canvasAux.height);
		}
	});

	var x = 0;

	add.addEventListener("click", function() {
		var imagesss = document.createElement("canvas");
		imagesss.width = canvasAux.width;
		imagesss.height = canvasAux.height;

		var contextsss = imagesss.getContext("2d");

		contextsss.drawImage(canvasAux, 0, 0, imagesss.width, imagesss.height);

		var element = {
			image: imagesss,
			width: 163,
			height: 191,
			x: x,
			y: 0
		};

		elements.push(element);

		x += 170;

		drawElements();
	});
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="background-color: #333;">
	<button id="add">Add</button> <button id="change">Change</button>

	<canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

	<canvas id="canvasAux" width="163" height="191" style="border: 1px solid #ccc;"></canvas>
</body>
</html>

【讨论】：