drawImage（）不適用於畫布

這裏是我的代碼下面我無法弄清楚我做錯了什麼。當我預覽它時，圖像不在那裏，只是畫布邊框。drawImage（）不適用於畫布

<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Page Title</title> 
</head> 

<canvas id="myCanvas" width="200" height="100" 
style="border:1px solid #000000;"> 
</canvas> 

<body> 

<script> 

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var sticky = new Image(); 
sticky.src = "sticky.png"; 
sticky.onload = function() { 
context.drawImage(sticky, 0, 0); 
}; 

</script> 

</body> 
</html>

來源

2014-10-01 user3150635

是onload事件執行？檢查sticky.png是否是您圖片的有效路徑。 – markE 2014-10-01 20:48:20

當我使用html 標記時，圖像顯示出來了，但是我希望它在javascript中，這樣我就可以使它移動和填充東西。很明顯，圖像本身的路徑很好，但也許在我的JavaScript語法錯誤？ – user3150635 2014-10-01 22:34:28

不，你的語法很好......我用自己的圖像代替了，你的確切代碼運行良好。有一個很小的可能性，你有一個時間問題，所以嘗試將.src放在.onload（不可能改變任何東西，但值得一試）。 – markE 2014-10-01 23:07:30

控制檯顯示您的文件的鏈接。看看那裏是否正確

也許你應該等到圖像加載之後再繪製它。試試這個：

var canvas = document.getElementById("myCanvas"); 
 
    var context = canvas.getContext("2d"); 
 
    make_base(); 
 
    function make_base() 
 
    { 
 
     base_image = new Image(); 
 
     base_image.src = 'http://techtastico.com/files/2014/06/Apple-Swift-Logo.png'; 
 
     base_image.onload = function(){ 
 
     context.drawImage(base_image, 0, 0); 
 
     }; 
 
    }

<canvas id="myCanvas" width="200" height="100" 
 
    style="border:1px solid #000000;"> 
 
    </canvas>

來源

2014-10-01 20:57:46 AvrilAlejandro

您的回答與提問者代碼有何不同？ – markE 2014-10-01 21:27:11

drawImage（）不適用於畫布

回答

相關問題