为什么我的矩形没有出现在我的画布 javascript 中？

如何解决为什么我的矩形没有出现在我的画布 javascript 中？

我不知道我的 js 代码中缺少什么，但是矩形没有出现，我缺少什么？这个问题我已经有一段时间了

"use strict";
let ctx;


function setup() {
  let canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  
  figures();
}

function figures(){
    ctx.fillStyle = "red";
  ctx.fillRect(50,50,150,75);
    ctx.fillStyle = "red";
  ctx.fillRect(200,200,60,100);
}

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width">
    <title>rectangles</title>
    <link href="javascript.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
     <canvas id="myCanvas" height="500" width="500" style="border: 1px solid black"></canvas>
  </body>
</html>

解决方法

您需要将脚本标签作为正文中的最后一个标签，浏览器在从上到下解析页面时呈现页面。这意味着当它到达 body 标签末尾的脚本部分时，你的 HTML 应该被加载，所以你的脚本使用的元素很可能会出现，并且您还需要在 javascript 文件中调用 setup 函数 html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>rectangles</title>
    <link href="javascript.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <script src="script.js"></script>  
     <canvas id="myCanvas" height="500" width="500" style="border: 1px solid black"></canvas>
 
</body>
</html>

javascript 文件

"use strict";
let ctx;


function setup() {
  let canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  
  figures();
}

function figures(){
    ctx.fillStyle = "red";
  ctx.fillRect(50,50,150,75);
    ctx.fillStyle = "red";
  ctx.fillRect(200,200,60,100);
}

setup();