2D画布（后面的3D Canvas）的未绘制图像

我目前正在探索three.js所，并在我的小项目。该项目包含一个专注于3D模型和动画的画布，以及另一个处理更简单2D作品的画布。2D画布（后面的3D Canvas）的未绘制图像

我已经设置了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 { 
 
\t position: fixed; 
 
\t z-index: 0; 
 
} 
 
#bgcanvas { 
 
\t z-index: -10; 
 
\t position: fixed; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
}

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

这是怎么回事，我是不知道的？提前致谢！

UPDATE编辑：这个问题是我必须在其左上角是透明的图像，并且不知道图像将伸展。 user3412847的评论让我看着办吧

来源

2015-06-29 Rui Miguel

只是一个fyi：如果你不知道并开始怀疑为什么你的图像看起来很奇怪（拉伸），这是因为你已经在CSS中设置了画布的宽度和高度。一个画布的标准尺寸是300x150像素，使用CSS来改变尺寸会拉伸它。相反，使用'canvas.width = 100;'和'canvas.height = 100'来改变画布的大小。 – Niddro

我没有意识到这一点，感谢您的提示！一旦图像问题消失，我会更改我的代码！ –

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

希望这会有所帮助。

来源

2015-06-29 18:45:50

那么，事实证明，解决方案的一部分是......不那么愚蠢。图像的左上角是透明的，但我不知道如果我使用CSS调整它的大小，图像将被拉伸到画布的整个宽度。直接给图像的宽度和高度让我明白我的错误。我非常感谢您的帮助和提示！ –

不，您总是必须在分配.src之前声明onload函数，否则，图像将在您告诉它在加载完成后应该执行的操作之前开始加载。 – Niddro

@Niddro谢谢你的建议，不知道是这样。 –

我猜你不必在这条道路的图像;它工作正常，我有一个有效的图像（例如：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 { 
 
\t position: fixed; 
 
\t z-index: 0; 
 
} 
 
#bgcanvas { 
 
\t z-index: -10; 
 
\t position: fixed; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
}

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

来源

2015-06-29 18:18:57 rgthree

我确实在那里有一个图像，我确定我询问过几次之后再检查它。正如我所说的，它在一个不同的文件中工作得很好，这是这些片段模拟的内容，但是当与其他前景画布放在一起时，图像将不会显示。非常感谢！ –

您是否试过指定宽度和高度（'context.drawImage（image，x，y，w，h）'）？只是一个想法。 –

如果上面的代码没有帮助，我认为是时候看看你的代码的其余部分了，可能会搞砸了一些东西。 – Niddro

2D画布（后面的3D Canvas）的未绘制图像

回答

相关问题