将图像动态加载到覆盖的画布中并调整它们的大小

Question

我有两个重叠的画布。现在我想将图像动态加载到画布中，并根据图像大小调整它们的大小。

我现在的问题是，在画布加载图像并自行调整大小后，它们会覆盖下面的所有其他 html 项。

这是最简单的例子：

loadimage.onclick = function(e) {
  //load image1
  var img1 = new Image();

  img1.onload = function() {
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");

    //resize canvas1
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    ctx.drawImage(this, 0, 0);
  };

  img1.src = "https://via.placeholder.com/250/0000FF/808080/";


  //load image2
  var img2 = new Image();

  img2.onload = function() {
    var canvas = document.getElementById("canvas2");
    var ctx = canvas.getContext("2d");

    //resize canvas1
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    ctx.drawImage(this, 75, 75);
  };

  img2.src = "https://via.placeholder.com/50/00FF00/808080/";
}

<div id="container" style="position: relative; width: 200px; height: 100px;">
  <canvas id="canvas1" width="200" height="100" style="position: absolute; left: 0; top: 0; z-index: 0; border: 1px solid #000;"></canvas>
  <canvas id="canvas2" width="200" height="100" style="position: absolute; left: 0; top: 0; z-index: 1; border: 1px solid #000;"></canvas>
</div>

<button id="loadimage" type="button">Load Content</button>

按下“加载内容”后 按钮，按钮不会向下移动。

我还尝试更改“容器”的宽度和高度属性 div，但行为没有改变。

我在这里错过了什么？

Answer 1

所以，代码有很多问题。如果您是初学者，请不要担心。这很正常。 ☺

首先，<canvas>是对标签。这意味着您必须使用</canvas> 将其关闭。正确的形式是<canvas someattribute="somevalue"></canvas>。在<canvas> 标记内放置替代内容，当浏览器不支持<canvas> 标记时将使用它（这是相当新的）。

省略 </canvas> 会破坏页面。

HTML 规定了哪些标签必须关闭，哪些不应该关闭，<canvas> 是 必须 关闭的标签之一。 The Validator 可以帮助您识别代码中的错误。请注意，这是相当迂腐的。

第二个问题是您使用了绝对定位，并且画布在调整大小时覆盖了按钮。只需禁用定位或使用一些更精确的定位方式。第三种选择是在 JS 中适当调整容器 div 的大小。

容器 div 也设置了固定大小。默认情况下，当内容变大时，溢出。

您可能试图使用z-index 来解决它。设置 z-indexes 通常非常棘手，我尝试将其用作最后的手段。您的两个 z-index 属性均无效。 是z-index: NUMBER，不是z- index 或z index。

我发现的最后一个错误是您在第二个函数中使用了canvas1（未定义变量）而不是canvas。

loadimage.onclick = function(e) {
  //load image1
  var img1 = new Image();

  img1.onload = function() {
    var canvas = document.getElementById("canvas1");
    var ctx = canvas1.getContext("2d");

    //resize canvas1
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    ctx.drawImage(this, 0, 0);
  };

  img1.src = "https://via.placeholder.com/250/0000FF/808080/";


  //load image2
  var img2 = new Image();

  img2.onload = function() {
    var canvas = document.getElementById("canvas2");
    var ctx = canvas.getContext("2d");

    //resize canvas1
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    ctx.drawImage(this, 0, 0);
  };

  img2.src = "https://via.placeholder.com/50/00FF00/808080/";
}

<div id="container">
  <canvas id="canvas1" width="200" height="100" style="border: 1px solid #000;"></canvas>
  <canvas id="canvas2" width="200" height="100" style="border: 1px solid #000;"></canvas>
</div>

<button id="loadimage" type="button">Load Content</button>