圖像顯示在JavaScript中

Question

我正在嘗試使剪貼畫圖像出現在JavaScript中的畫布內部，並且由於某種原因剪貼畫未出現在矩形的頂部我正在繪製爲邊框，並且我沒有線索如何讓他們都出現。矩形顯示不是圖片。我不允許把兩個都放在畫布上嗎？我需要分兩層畫布嗎？我只是錯誤地編碼了嗎？任何幫助將非常感激。

<canvas id = "myCanvas" width = "400" height="400"></canvas> 
<script> 
var r = document.getElementById("myCanvas"); 
var rec = r.getContext("2d"); 
rec.strokeStyle = "black"; 
rec.rect(20,20,300,300); 
var img = new Image(); 
img.onload = function() 
{ 
    rec.drawImage(img,30,30); 
} 
img.src = "monkey-face-cartoon.png"; 
rec.stroke(); 
function monkeyMove(){ 
} 
</script> 

Answer 1

看起來像沒有被正確加載，併爲此img.onload不會被調用。我換出了一個data-uri的src，它表現得很好。你從哪裏得到圖像？