为什么我的矩形不出现在我的画布 javascript 中？答案

【问题标题】：Why my rectangles don't appear in my canvas javascript?为什么我的矩形不出现在我的画布 javascript 中？
【发布时间】：2021-03-26 20:17:08
【问题描述】：

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

【问题讨论】：

script.js 中有什么内容？至少在你的 sn-p 中，你永远不会调用 setup 或 figures

标签： javascript canvas canvasjs

【解决方案1】：

你需要把你的 script 标签作为你 body 的最后一个标签，浏览器在从上到下解析页面时呈现页面。这意味着当它到达 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();

【讨论】：