HTML畫布圖像沒有顯示

這是代碼：是越來越創建 HTML畫布圖像沒有顯示

<head> 
    <title>Canvas</title> 
</head> 

<body> 
    <canvas id="c" width="200" height="200"> 
    </canvas> 

    <script> 
     var c = document.querySelector("#c"); 
     var ctx = c.getContext("2d"); 

     var image = new Image(); 

     image.onLoad = function() { 
      console.log("Loaded Image"); 
      ctx.drawImage(image, 0, 0, c.width, c.height); 
     }; 

     image.src = "fry_fixed.jpg"; 
    </script> 
</body>

畫布。圖像未顯示。我試圖調試它，發現onLoad函數不起作用。我可以確保您的圖像位於同一個文件夾中，並且圖像名稱正確。但我仍然無法弄清楚爲什麼代碼不工作！

來源

2015-12-15 Prabhat Doongarwal

嘗試'image.addEventListener（ '負荷'，函數（）{...}，假）'，而不是onLoad'的'，如果你使用'onLoad'，然後用正確的'onload' - 非大寫。 – somethinghere

情況下重要的，它是onload，全部小寫，不onLoad

image.onload = function() {...

或代替onLoad更現代addEventListener

image.addEventListener('load', function() {...}, false);

來源

2015-12-15 15:45:34 adeneo

謝謝！它的工作。 –

使用onload。或者甚至更好，使用事件監聽器！

var c = document.querySelector("#c"); 
 
var ctx = c.getContext("2d"); 
 

 
var image = new Image(); 
 

 
// Better use addEventListener, to be honest. 
 
// image.onload = function() { 
 
// ctx.drawImage(image, 0, 0, c.width, c.height); 
 
// }; 
 

 
image.addEventListener('load', function(){ 
 
    ctx.drawImage(image, 0, 0, c.width, c.height); 
 
}, false) 
 

 
image.src = "http://placehold.it/200x200";

<canvas id="c" width="200" height="200"></canvas>

來源

2015-12-15 15:47:19 somethinghere

「甚至更好，使用事件監聽器」...你認爲'onload'是什麼？ –

@Pamblam祝賀諷刺評論，但是'addEventListener'是一種更安全，更好的方式來傾聽事件，以及更多功能。最好先學好東西。 – somethinghere

請告訴我你的方法是不是完全一樣？ –

HTML畫布圖像沒有顯示

回答

相關問題