Question

我是一个初学者，我只是在学习Canvas。我尝试了此方法，但无法与我一起使用。这是我使用的代码。问题出在哪里？

<!DOCTYPE html>
<html>
<head>
  <title> 28 - Canvas - Create Simple Canvas </title>
  <meta charset="utf-8">
  <meta name="description" content="Canvas - Create Simple Canvas" >
  <style>
    canvas{
      width: 800px;
      height: 400px;
      border: 1px solid #ccc;
      margin: 50px auto;
      display: block;
    }
  </style>
</head>
<body>

  <canvas id="c">  </canvas>
  <script>

  var MyCanvas = document.getElementById('c');

  myContext = MyCanvas.getContext('2d');
  myContext.fillStyle = '#080';
  myContext.fillRect('0, 0, 100, 50');

    </script>

</body>
</html>

控制台会告诉我：未捕获的TypeError：无法在'CanvasRenderingContext2D'上执行'fillRect'：需要4个参数，但只有1个。

Answer 1

fillRect的参数不是字符串。

您可以像下面的代码一样简单地设置值。

make myContext.fillRect（'0，0，100，50'）;

myContext.fillRect（0，0，100，50）;

<!DOCTYPE html>
<html>
<head>
  <title> 28 - Canvas - Create Simple Canvas </title>
  <meta charset="utf-8">
  <meta name="description" content="Canvas - Create Simple Canvas" >
  <style>
    canvas{
      width: 800px;
      height: 400px;
      border: 1px solid #ccc;
      margin: 50px auto;
      display: block;
    }
  </style>
</head>
<body>

  <canvas id="c">  </canvas>
  <script>

  var MyCanvas = document.getElementById('c');

  myContext = MyCanvas.getContext('2d');
  myContext.fillStyle = '#080';
  myContext.fillRect(0, 0, 100, 50);

    </script>

</body>
</html>

Answer 2

如果您在Chrome中打开html文件，然后打开Chrome开发者工具（在Windows上为F12），它将帮助您调试应用程序。开发工具中的控制台选项卡将在屏幕上输出任何JavaScript错误，可以告诉您代码中的错误在哪里。因此，例如，从上面的代码中，我得到了以下错误：

Uncaught TypeError: Failed to execute 'fillRect' on 'CanvasRenderingContext2D': 4 arguments required, but only 1 present. at index.html:26

基于此，我查看了fillRect方法，并注意到您将参数作为字符串传递。如果我在MDN上查看fillRect，它会告诉我它期望有4个数字参数，这也是错误的含义。所以我将第26行myContext.fillRect('0, 0, 100, 50');更改为 myContext.fillRect(0, 0, 100, 50);通过删除周围的引号而且有效。

遵循此模式将帮助您调试代码。

使用fillRect在浏览器中不显示画布

2 个答案: