Javascript 二维画布（在三维画布后面）不绘制图像

我目前正在使用Three.js进行探索，并在我的一个小项目上工作。 该项目包括一个专注于3D模型和动画的画布，以及后面的另一个画布，用于处理更简单的2D工作

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

我遇到的问题是当涉及到图像时。我根本无法在2D画布上显示图像。我在一个单独的项目上做过实验，可以在那里画画，没问题。代码非常基本，我在这里找到了它，但如下所示：

window.onload=function（）{
var canvas=document.getElementById（'bgcanvas'）；
var context=canvas.getContext（'2d'）；
var logoText=新图像（）；
logoText.onload=函数（）{
背景。drawImage（logoText，69,50）；
};
logoText.src='images/logoText.png'；
}

#画布{
位置：固定；
z指数：0；
}
#bgcanvas{
z指数：-10；
位置：固定；
宽度：100vw；
高度：100vh；
}

---

我猜您在该路径上没有图像；如果有一个有效的图像（例如：），它对我来说很好：

window.onload=function（）{
var canvas=document.getElementById（'bgcanvas'）；
var context=canvas.getContext（'2d'）；
var logoText=新图像（）；
logoText.onload=函数（）{
背景。drawImage（logoText，69,50）；
};
logoText.src=http://lorempixel.com/100/100';
}

#画布{
位置：固定；
z指数：0；
}
#bgcanvas{
z指数：-10；
位置：固定；
宽度：100vw；
高度：100vh；
}

---

指定图像的宽度和高度是一个好习惯。使用以下语法：

context.drawImage（图像、x、y、宽度、高度）

---

希望这能有所帮助。

仅供参考：如果您不知道并且开始想知道为什么您的图像看起来很奇怪（拉伸），那是因为您在CSS中设置了画布的宽度和高度。画布的标准大小为300x150像素，使用CSS更改大小将使其拉伸。而是使用

canvas.width=100

和

canvas.height=100

来改变画布的大小。我不知道，谢谢你的提示！一旦图像问题消失，我将更改代码！我确实有一张照片在那里，我在询问之前检查了几次。正如我所说，它在不同的文件中工作得非常好，这就是这些代码段所模拟的，但是当与其他前景画布组合在一起时，图像将不会显示。不过，非常感谢！您是否尝试过指定宽度和高度（

context.drawImage（image，x，y，w，h）

）？只是一个想法。如果上面的代码没有帮助，我想是时候看看你的代码的其余部分了，有些东西可能把事情搞砸了。嗯，原来解决方案的一部分是。。。别那么傻了。图像的左上角是透明的，但我不知道如果我使用CSS调整图像的大小，图像会被拉伸到画布的整个宽度。直接给出图像的宽度和高度让我明白了我的错误。我真的很感谢你的帮助和提示！不，在分配.src之前，您必须始终声明onload函数，否则，在您告诉图像加载完成后应该做什么之前，图像将开始加载。@Niddro感谢您提供的提示，不知道会发生这种情况。@Niddro发现您的注释也是答案的一部分，因此，再次感谢您。没问题，@user3412847请确保编辑您的答案，删除最后的建议，以便其他来这里寻找答案的用户将其弄错=）