Question

我想将几个不同的元素（图像通过canvasAux）添加到数组并在canvas上绘制它们，但是当添加第二个项目时，第一个项目的图像也会更改（所以上）。如何解决这个问题，以便每个元素可以有不同的图像？

以下示例：

步骤：点击＆＃34;添加＆＃34;，然后点击＆＃34;更改＆＃34;和＆＃34;添加＆＃34;再次（或＆＃34;添加＆＃34;，＆＃34;添加＆＃34;，＆＃34;更改＆＃34;和＆＃34;再次添加＆＃34;再次）。如何保留带有Google徽标的第一个元素以及带有Yahoo徽标（或任何其他）的其他元素？

＆＃13;

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();
	});
}

＆＃13;

<!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>

＆＃13;

Answer 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>

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

1 个答案: