.fillStyle 不起作用，控制台中没有错误答案

【问题标题】：.fillStyle not working, no errors in console.fillStyle 不起作用，控制台中没有错误
【发布时间】：2016-08-17 07:26:52
【问题描述】：

这是我的代码：

<!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 文件：///Users/darceymckelvey/Documents/Rogue/js/main.js 得到 https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js [HTTP/2.0 304 未修改 60ms] file:///Users/darceymckelvey/Documents/Rogue/css/style.css

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

脚本中缺少“var”。您也没有任何对象可以填充颜色。因此，您必须创建一个以便用颜色填充它。请参阅this documentation on 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>

【讨论】：