javascript - 2D Canvas(在 3D Canvas 后面)不绘制图像

Question

我目前正在探索 Three.js，并致力于我的一个小项目。 该项目包含一个专注于 3D 模型和动画的 Canvas ，以及另一个用于处理更简单的 2D 工作的 Canvas 。

我已经正确设置了 3D Canvas ，所以它的背景是透明的，我可以看到我在 2D Canvas 上手动绘制的框，这让我假设设置是正确的。

我遇到的问题是图像方面的问题。我根本无法在 2D Canvas 上显示图像。我已经在一个单独的项目上进行了试验，可以在那里绘制图像，没问题。代码非常基础，我实际上是在这里找到的，但如下所示:

window.onload = function() {
      var canvas = document.getElementById('bgcanvas');
      var context = canvas.getContext('2d');
      var logoText = new Image();

      logoText.onload = function() {
        context.drawImage(logoText, 69, 50);
      };
      logoText.src = 'images/logotext.png';
}

#canvas {
	position: fixed;
	z-index: 0;
}
#bgcanvas {
	z-index: -10;
	position: fixed;
	width: 100vw;
	height: 100vh;
}

<div id="fixedContainer">
  <canvas id="bgcanvas"></canvas>
  <canvas id="canvas"></canvas>
</div>

发生了什么我不知道的事情？ 非常感谢!

更新编辑:问题是我有一张左上角是透明的图像，并且不知道图像会拉伸(stretch)。 user3412847 的评论帮助我弄明白了

Answer 1

指定图像宽度 和高度 是养成的好习惯。使用此语法:context.drawImage(image, x, y, width, height)。

希望这对您有所帮助。