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不显示我的矩形

回答

相关问题