在畫布上

我試圖把圖像在畫布上繪製圖像。我看了下面的教程 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images 並做它類似的東西我的畫布是<canvas id="canvas" width="400" height="400"></canvas> ，我已經創建了功能在畫布上

function putImage(){ 
     var img = new Image(); 
     img.src = "./path.png"; 
     var ctx = document.getElementById('canvas').getContext('2d'); 
     ctx.drawImage(img,8,8);    
    }

但圖像沒有出現在畫布上。我已經打印的圖像路徑是正確的，所以我能夠消除這個問題。有什麼建議嗎？

感謝

來源

2013-03-11 Quantico

確定圖片的路徑是正確的？您是否在開發者控制檯/螢火蟲上遇到任何錯誤？ – 2013-03-11 07:31:42

是的100％肯定我打印到控制檯，它是正確的路徑「./dir/image.png」在控制檯中沒有錯誤 – Quantico 2013-03-11 07:48:29

按照教程，你應該換你ctx.drawImage（）內img.load像這樣

function draw() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    var img = new Image(); 
    img.onload = function(){ 
    ctx.drawImage(img,0,0); 
    ctx.beginPath(); 
    ctx.moveTo(30,96); 
    ctx.lineTo(70,66); 
    ctx.lineTo(103,76); 
    ctx.lineTo(170,15); 
    ctx.stroke(); 
    }; 
    img.src = '/files/4531/backdrop.png'; 
}

我希望這有助於。

來源

2013-03-11 07:51:27

詳細說明爲什麼你必須這樣做：當你設置'。 src'屬性，圖像是從服務器請求的，但程序不會等到圖像加載完成。它繼續運行，當涉及需要尚未加載的圖像的ctx.drawImage方法調用時，它會忽略此調用。 – Philipp 2013-03-11 09:24:18

回答

相關問題