如何创建两个各含图片的Canvas？复制代码后原Canvas图片消失

你遇到的问题核心是：window.onload只能被赋值一次，后面的函数会直接覆盖前面的。第一次你给window.onload赋值了绘制myCanvas1的函数，第二次又赋值了绘制myCanvas2的函数，最终只有第二个函数会在页面加载完成后执行，所以第一个Canvas的图片没被绘制出来。

下面提供两种可行的解决方法：

方法一：合并到同一个window.onload函数 #

把两个Canvas的绘制逻辑放在同一个window.onload函数里，确保两个绘制操作都能执行：

<img id="Man2" width="0" height="0" src="Man2.PNG" alt="Man2">
<canvas id="myCanvas1" width="600" height="450" style="border:1px solid grey;"></canvas>

<img id="Evil" width="0" height="0" src="Evil.png" alt="Evil">
<canvas id="myCanvas2" width="600" height="450" style="border:1px solid grey;"></canvas>

<script>
window.onload = function() {
  // 绘制第一个Canvas
  const canvas1 = document.getElementById("myCanvas1");
  const ctx1 = canvas1.getContext("2d");
  const img1 = document.getElementById("Man2");
  ctx1.drawImage(img1, 10, 10);

  // 绘制第二个Canvas
  const canvas2 = document.getElementById("myCanvas2");
  const ctx2 = canvas2.getContext("2d");
  const img2 = document.getElementById("Evil");
  ctx2.drawImage(img2, 10, 10);
};
</script>

方法二：使用addEventListener绑定事件 #

用addEventListener可以给window.load添加多个事件处理函数，不会互相覆盖，适合分开维护逻辑的场景：

<img id="Man2" width="0" height="0" src="Man2.PNG" alt="Man2">
<canvas id="myCanvas1" width="600" height="450" style="border:1px solid grey;"></canvas>

<img id="Evil" width="0" height="0" src="Evil.png" alt="Evil">
<canvas id="myCanvas2" width="600" height="450" style="border:1px solid grey;"></canvas>

<script>
// 第一个Canvas的绘制逻辑
window.addEventListener('load', function() {
  const canvas = document.getElementById("myCanvas1");
  const ctx = canvas.getContext("2d");
  const img = document.getElementById("Man2");
  ctx.drawImage(img, 10, 10);
});

// 第二个Canvas的绘制逻辑
window.addEventListener('load', function() {
  const canvas = document.getElementById("myCanvas2");
  const ctx = canvas.getContext("2d");
  const img = document.getElementById("Evil");
  ctx.drawImage(img, 10, 10);
});
</script>

内容的提问来源于stack exchange，提问作者ToMadToCode