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）的未繪製圖像

回答

相關問題