时间戳

首页 > 解决方案 > 如何绘制灰色边框？

javascript - 如何绘制灰色边框？

问题描述

我想画一个边框。但是，当我完成代码时，它显示了一个错误。这是我写的代码：

  <canvas id="painting" width="700" height="700"></canvas>

  <script>
    var colourCanvas = document.getElementById("colour");
    var colourctx = colourCanvas.getContext("2d");

    var widthColour = colourCanvas.width;
    var heightColour = colourCanvas.height;

    var blockSizeColour = 10;
    var widthInBlocksColour = widthColour / blocksSizeColour;
    var heightInBlocksColour = heightColour / blockSizeColour;

    var drawColourBorder = function (colour) {
      colourctx.fillStyle = colour;
      colourctx.fillRect(0, 0, widthColour, blockSizeColour));
      colourctx.fillRect(0, heightColour - blockSizeColour, widthColour, blockSizeColour);
      colourctx.fillRect(0, 0, blockSizeColour, heightColour);
      colourctx.fillRect(widthColour - blockSizeColour, 0, blockSizeColour, heightColour);
    };
    drawColourBorder("Gray");
  </script>

有什么问题吗？此外，显示的错误是：

Uncaught SyntaxError: missing ) after argument list

此外，您可能会看到

colourctx.fillRect(0, 0 widthColour, blockSizeColour));

有 2 ')'s。

我知道，我一分享它就改变了它，但错误仍然是一样的。

如何将代码更改为灰色 (700x700) 边框？

标签： javascripthtmlcanvas

解决方案

...
<canvas id="painting" width="700" height="700"></canvas>

  <script>
    var colourCanvas = document.getElementById("painting");
    var colourctx = colourCanvas.getContext("2d");

    var widthColour = colourCanvas.width;
    var heightColour = colourCanvas.height;

    var blockSizeColour = 10;
    var widthInBlocksColour = widthColour / blockSizeColour;
    var heightInBlocksColour = heightColour / blockSizeColour;

    var drawColourBorder = function (colour) {
      colourctx.fillStyle = colour;
      colourctx.fillRect(0, 0, widthColour, blockSizeColour);
      colourctx.fillRect(0, heightColour - blockSizeColour, widthColour, blockSizeColour);
      colourctx.fillRect(0, 0, blockSizeColour, heightColour);
      colourctx.fillRect(widthColour - blockSizeColour, 0, blockSizeColour, heightColour);
    };
    drawColourBorder("Gray");
  </script>

推荐阅读