圖像不載入畫布上？

我試圖將圖像加載到畫布上，並試圖一切後，一直沒有工作......圖像不載入畫布上？

的Javascript：

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var start = new Image(); 

start.onload = function(){ 
    context.drawImage(start, 0, 0, start.width, start.height, 0, 0, 
    canvas.width, canvas.height); 
    } 

start.src = "hangman0.png";

我看不出有什麼毛病我的代碼，我想得出這樣的圖像，然後規模爲畫布的寬度和高度，但畫面只是沒有顯示出來，不管是什麼。任何指針？我試過改變我的HTML5和CSS代碼，仍然無濟於事。

CSS：

canvas{ 
    background-color: rgb(0,198,255); 
    border-style: ridge; 
    border-width: 5px; 
    border-color: rgb(157,255,0); 
    position: relative; 
}

HTML5：提前爲幫助

<body> 
    <div id='section'> 
     <canvas id='myCanvas' width='979px' height='560px'></canvas> 
     <script src="projectJavaScript.js"></script> 
    </div> 
</body>

謝謝！

來源

2016-04-21 Herman Lee Tzer Her

-1

你似乎是設置圖像源是使用將被它會使用默認的空白狀態，當它被調用後。

也出現使用start.onload是開始，但不表示一個元素，但varble，它不會因爲原來的HTML元素的它不屬於被加載。我會用canvas.onload或body.onload運行

來源

2016-04-21 20:27:14 matthew1124

你提供的代碼工作對我來說，只要我使用window.onload：

你包裹裏window.onloadscript代碼？

<script> 
window.onload=(function(){ 

    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var start = new Image(); 

    start.onload = function(){ 
     context.drawImage(start, 0, 0, start.width, start.height, 0, 0, 
     canvas.width, canvas.height); 
     } 

    start.src = "https://dl.dropboxusercontent.com/u/139992952/multple/rainy.png"; 

}); // end window.onload 
</script>

實施例的代碼和一個演示：

注：StackSnippets自動換JS-腳本代碼內的window.onload

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
var start = new Image(); 
 

 
start.onload = function(){ 
 
    context.drawImage(start, 0, 0, start.width, start.height, 0, 0, 
 
    canvas.width, canvas.height); 
 
    } 
 

 
start.src = "https://dl.dropboxusercontent.com/u/139992952/multple/rainy.png";

body{ background-color: ivory; } 
 
canvas{border:1px solid red; margin:0 auto; }

<canvas id='myCanvas' width='979px' height='560px'></canvas>

來源

2016-04-21 20:28:44 markE

對不起，我對於一些JS術語來說這不太好，因爲我相當新s，你通過在window.onload中包裝腳本代碼是什麼意思？我的JavaScript代碼在它自己的文件中，我從HTML文件中調用腳本。我也試過你的代碼，仍然沒有畫任何東西:( –

「包裝」手段把你的代碼裏面的東西 - 在這種情況下，它意味着把你的代碼在函數內部['函數（）{YOUR-CODE}']那對於瀏覽器等待它試圖執行你的JS之前加載窗口所以，在外部JS文件，把'在window.onload =（函數（）{'在頂部和'}）'底部： - ） – markE

我現在做的包裝，但它有點毛刺我的整個頁面，現在，它的繪圖我想要的圖片，但持續閃爍整個頁面白色，和我的網頁無法完成加載，即加載循環繼續運行。但至少它與之前相比完全沒有改變，非常感謝！我會盡量先解決這個問題。 –

圖像不載入畫布上？

回答

相關問題