圖像加載不與畫布

Question

我試圖加載圖像在網頁上，但圖像無法顯示。

所有這些代碼在車身踏歌

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

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

        var image=new Image(); 
        image.onload=function(){ 
         console.loge("Loaded image"); 
         ctx.drawImage(image,0,0,c.width,c.height); 

        } 
        image.src="barn.jpg"; 
       </script> 

Answer 1

我不知道你在問什麼，但作爲@markE評論，有一些語法錯誤，我不會把錯誤。我看到它的方式是你需要在,image.onload（）之前放置image.src="barn.jpg";;功能。這是我會怎麼做代碼：

---

<canvas height="400" width="400" id="c"></canvas> 
<script> 
    var c=document.querySelector("#c"); 
    var ctx=c.getContext("2d"); 

    var image=new Image(); 
    image.src="barn.jpg"; 

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

    } 
</script> 

注：我不能完全肯定，爲什麼你不只是使用的document.getElementById("c");代替document.querySelector("#C");