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

Question

我不知道我的 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>

Answer 1

您需要将您的脚本标签作为您正文中的最后一个标签，浏览器在从上到下解析页面时呈现页面。这意味着当它到达 body 标签末尾的脚本部分时，您的 HTML 应该被加载，因此您的脚本使用的元素很可能会出现，并且您还需要在 javascript 文件中调用设置函数 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();

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

Why my rectangles don't appear in my canvas javascript?

javascript

canvas

canvasjs