3

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

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

有人有建议吗？

4

2 回答 2

3

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

这是您正在寻找的功能的一个非常好的演示：

http://fabricjs.com/

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

于 2012-06-30T01:38:51.597 回答
1

我在谷歌上查了一下，有一个有趣的教程/代码，它绘制了一个具有 n 边和大小的正多边形。所以我想把它做成一个函数，我遇到的一个技术问题是当画布被画出来时，我点击画另一个画布，第二个画布被“覆盖”在第一个画布上。幸运的是，这里有人通过清除画布解决了这个问题。

所以这是我的代码，您可以根据需要更改它：

<!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>
于 2012-06-30T02:57:44.417 回答