.fillStyle 不工作，控制台没有错误

Question

所以这是我的代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Rogue Game</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="canvasGame()">
  <canvas  id="myCanvas" width="800" height ="800">
    <p>Sorry your browser does not support canvas!</p>
  </canvas>

</body>
</html>

和 Javascript：

function canvasGame() {
  canvas = document.getElementById("myCanvas");

  if(canvas.getContext) {
    ctx = canvas.getContext("2d");
    ctx.fillStyle = "white";
    ctx.fill();
  }
}

我得到的控制台是：

file:///Users/darceymckelvey/Documents/Rogue/css/style.css file:///Users/darceymckelvey/Documents/Rogue/js/main.js GET https://ajax.googleapis.com/ajax/libs /jquery/1.12.2/jquery.min.js [HTTP/2.0 304 Not Modified 60ms] file:///Users/darceymckelvey/Documents/Rogue/css/style.css

我的画布不是白色，它只是我在 CSS 中设置主体的颜色。

Answer 1

您在脚本中缺少“var”。 您也没有任何对象可以填充颜色。 因此，您必须创建一个以填充颜色。 有关更多信息，请参阅有关 fill() 的文档。 这是一个有效的示例：

<html>
<head>
  <meta charset="utf-8" />
  <title>Rogue Game</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">    </script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="canvasGame()">
  <canvas  id="myCanvas" width="800" height ="800">
    <p>Sorry your browser does not support canvas!</p>
  </canvas>
<script>
function canvasGame() {
  var canvas = document.getElementById("myCanvas");

  if(canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(20, 20, 150, 100);
    ctx.fillStyle = "white";
    ctx.fill();
  }
}
</script>
</body>
</html>