Question

我目前正在与Three.js一起探索，并在我的一个小项目上工作。该项目包括一个专注于3D模型和动画的画布，另一个专注于处理简单2D工作的画布。

我已正确设置3D画布，因此它的背景是透明的，我可以看到我在2D画布上手动绘制的框，这使我认为设置是正确的。

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

＆＃13;

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';
}

＆＃13;

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

＆＃13;

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

＆＃13;

我不知道的是什么？非常感谢提前！

更新编辑：问题是我的左上角是透明的图像，并且不知道图像会拉伸。 user3412847的评论让我弄清楚了

Answer 1

指定图片width和height是一个很好的习惯。使用以下语法：context.drawImage(image, x, y, width, height)。

希望这有帮助。

Answer 2

我猜你不会在那条路上有一张照片;使用有效图像（例如：http://lorempixel.com/100/100）：

对我来说效果很好

＆＃13;

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 = 'http://lorempixel.com/100/100';
}

＆＃13;

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

＆＃13;

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

＆＃13;

2D画布（在3D画布后面）不绘制图像

2 个答案: