3

これまでキャンバスを使用したことがないことを認めることから始めます。これが可能かどうかはわかりませんが、解決策が見つからないようです。

ユーザーが HTML/PHP フォームで入力する可能性が最も高い多角形の辺の数とサイズに基づいて、キャンバスに単純な正多角形 (すべての辺が等しい) を描画するキャンバスを作成しようとしています。サーバーやデータベースには実際には何も保存されず、1 つの図面に使用されるだけです。

誰かアドバイスはありますか？

4

2 に答える 2

3

キャンバス上での描画を容易にするために、JavaScript ライブラリを使用する必要があります。

これは、探している機能の非常に優れたデモです。

http://fabricjs.com/

ライブラリは Fabric.js で、http: //fabricjs.com/からダウンロードできます。

于 2012-06-30T01:38:51.597 に答える
1

Google で調べたところ、n 辺とサイズの正多角形を描画する興味深いチュートリアル/コードがありました。私が遭遇した技術的な問題の1つは、キャンバスが描画され、クリックして別のキャンバスを描画すると、2番目のキャンバスが最初のキャンバスに「上書き」されることです。幸いなことに、ここの誰かがキャンバスをクリアすることでこの問題を解決しました。

これが私のコードです。必要に応じて変更できます。

<!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 に答える