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

Question

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

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

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

 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>

发生了什么我不知道的事情？ 提前致谢！

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

Answer 1

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

希望这可以帮助。

Answer 2

我猜你在那个路径上没有图像； 使用有效图像（例如： http : //lorempixel.com/100/100 ）对我来说效果很好：

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

 #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>