0
我想添加几个不同的元素（图片通过canvasAux）到一个数组并在canvas上绘制它们，但是当添加第二个项目时，第一个项目的图像也会发生更改（如此）。如何解决这个问题，使每个元素可以有不同的图像？下面如何将不同的图像（从同一个画布生成）绘制到另一个画布上？
例子：
步骤：单击“添加”，然后单击“更改”和“添加”了（或“添加”，“添加”，“变化”和“添加”了）。 如何让第一个元素带有Google徽标和其他带有Yahoo徽标（或任何其他）的元素？
window.onload = function() {
\t var canvas = document.getElementById("canvas");
\t var canvasAux = document.getElementById("canvasAux");
\t var context = canvas.getContext("2d");
\t var contextAux = canvasAux.getContext("2d");
\t var add = document.getElementById("add");
\t var change = document.getElementById("change");
\t var elements = [];
\t function drawElements() {
\t \t context.clearRect(0, 0, canvas.width, canvas.height);
\t \t for(var i = 0; i < elements.length; i++) {
\t \t \t context.drawImage(elements[i].image, elements[i].x, elements[i].y, elements[i].width, elements[i].height);
\t \t }
\t }
\t var imageDefault = new Image();
\t imageDefault.src = "https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
\t imageDefault.onload = function() {
\t \t contextAux.drawImage(imageDefault, 0, 0, canvasAux.width, canvasAux.height);
\t }
\t change.addEventListener("click", function() {
\t \t var imageAux = new Image();
\t \t imageAux.src = "https://s.yimg.com/zz/nn/lib/metro/g/my/yahoo_en-US_f_p_190x45_2x.png";
\t \t imageAux.onload = function() {
\t \t \t contextAux.clearRect(0, 0, canvasAux.width, canvasAux.height);
\t \t \t contextAux.drawImage(imageAux, 0, 0, canvasAux.width, canvasAux.height);
\t \t }
\t });
\t var x = 0;
\t add.addEventListener("click", function() {
\t \t var element = {
\t \t \t image: canvasAux,
\t \t \t width: 163,
\t \t \t height: 191,
\t \t \t x: x,
\t \t \t y: 0
\t \t };
\t \t elements.push(element);
\t \t x += 170;
\t \t drawElements();
\t });
}<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Document</title>
</head>
<body style="background-color: #333;">
\t <button id="add">Add</button> <button id="change">Change</button>
\t <canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas>
\t <canvas id="canvasAux" width="163" height="191" style="border: 1px solid #ccc;"></canvas>
</body>
</html>
嗯，你已经得到了只有一个'canvasAux'元素，所以当你修改它时，好吧......它被修改了......所有'元素'都指向相同的修改编辑画布。为什么不直接将'new Image'存储在'element'对象中呢？ – Kaiido
@Kaiido，但它们已经存储在'var element = {image：canvasAux'对象中......我真的需要这样做，因为在'canvasAux'元素中我操纵了选择的图像（我只是没有添加它在这个例子中，让我们很容易理解“问题”）。我发现这种行为很奇怪，因为每个对象都有自己的“图像”值。 – Igor
不，他们没有，他们都指向**相同**'