Question

 <!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的编码，其格式与我在代码中显示的完全相同，但我的屏幕仅显示第一组指令中的黑色矩形。

Answer 1

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

HTML Canvas不显示我的矩形

1 个答案: