HTML Canvas不顯示我的矩形

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 


<script> 
window.onload = function(){ 

    var canvas = document.getElementById("map"), 
     c = canvas.getContext("2d"); 

    c.fillStyle = "black"; 
    c.fillRect(0, 0, canvas.width, canvas.height); 

    c.fillStyle = "red"; 
    c.fillRect = (20, 30, 50, 250); 

    c.fillSyle = "white"; 
    c.fillRect = (50,50,25,25); 
}; 
</script> 

</head> 

<body> 
    <canvas id="map" width="800" height="400"> 
     <img src="images/sad dinosaur.jpg" /> 
     You will need an updated browser to view this page! 
    </canvas> 
</body> 
</html>

我只是用畫布修改一下，試圖感受它是如何工作的。但是，我正在觀看的教程視頻以與我的代碼中顯示的完全相同的格式顯示了c.fillRect和c.fillStyle的編碼，但我的屏幕僅顯示第一組指令中的黑色矩形。HTML Canvas不顯示我的矩形

來源

2014-10-08 user3380392

fillRect的語法是c.fillRect(...)，而不是c.fillRect = (...)。比較你的最後兩個電話和你的第一個電話。

此外，您最近的fillStyle錯誤地輸入爲fillSyle。

window.onload = function() { 

    var canvas = document.getElementById("map"), 
     c = canvas.getContext("2d"); 

    c.fillStyle = "black"; 
    c.fillRect(0, 0, canvas.width, canvas.height); 

    c.fillStyle = "red"; 
    c.fillRect(20, 30, 50, 250); 

    c.fillStyle = "white"; 
    c.fillRect(50, 50, 25, 25); 
};

WORKING EXAMPLE

來源

2014-10-08 16:20:33 showdev

AHHH右感謝這麼多完全錯過了！ – user3380392 2014-10-08 16:23:07

HTML Canvas不顯示我的矩形

回答

相關問題