Question

我将首先承认我之前从未使用过画布，因此我不知道这是否可行，但我似乎无法找到解决方案。

我正在尝试创建一个画布，根据用户在HTML / PHP表单中输入的多边形的边数和大小，在画布中绘制一个简单的正多边形（所有边都相等）。实际上没有任何东西保存到服务器或数据库，仅用于一个绘图。

有人有任何建议吗？

Answer 1

您应该使用JavaScript库来更轻松地在画布上绘图。

以下是您正在寻找的功能的非常好的演示：

http://fabricjs.com/

图书馆是Fabric.js，你可以在这里下载：http://fabricjs.com/

Answer 2

我在谷歌上查了一下，有一个有趣的tutorial/code画了一个带有n边和边的正多边形。尺寸。因此我想到了一个函数，我遇到的一个技术问题是当绘制画布并且我点击绘制另一个画布时，第二个画布在第一个画布上被“覆盖”。幸运的是，有人here通过清除画布解决了这个问题。

所以这是我的代码，您可以根据自己的需要进行更改：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Regular Polygon</title>
</head>
<body>
  <canvas id="regular_polygon" width="400" height="400"></canvas>

  <p>Polygon drawer:</p>
  <p>Number of sides <input type="text" id="nSides"></p>
  <p>Size <input type="text" id="size"></p>
  <p>Color <input type="text" id="color"></p>
  <p>Width <input type="text" id="width"></p>
  <button id="draw">Draw!</button>

  <script type="text/javascript">
    function polygon (element_id, nSides, psize, pcolor, pwidth) {
      var c = document.getElementById(element_id);
      c.width = c.width;
      var cxt = c.getContext("2d");
      var numberOfSides = nSides,
          size = psize,
          Xcenter = c.width/2,
          Ycenter = c.height/2;

      cxt.beginPath();
      cxt.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));

      for (var i = 1; i <= numberOfSides;i += 1) {
        cxt.lineTo (
          Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides),
          Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides)
        );
      }

      cxt.strokeStyle = pcolor;
      cxt.lineWidth = pwidth;
      cxt.stroke();
    }

    (function () {
      polygon("regular_polygon", 3, 40, "#000000", 2);
      document.querySelector('#draw').addEventListener('click', function (e) {
        e.preventDefault();
        var nSides = document.querySelector('#nSides'),
            size = document.querySelector('#size'),
            color = document.querySelector('#color'),
            width = document.querySelector('#width');

        polygon("regular_polygon", nSides.value, size.value, color.value, width.value);
      });
    })();
  </script>
</body>
</html>

带有动态用户输入的HTML5画布

2 个答案: