HTML 画布不显示我的矩形

HTML Canvas not displaying my rectangles

本文关键字：我的 显示 布不 HTML      更新时间：2023-09-26
 <!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 的编码，但我的屏幕只显示第一组指令中的黑色矩形。

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);
};

工作示例

相关文章：