具有动态用户输入的 HTML5 画布答案

【问题标题】：HTML5 canvas with dynamic user input具有动态用户输入的 HTML5 画布
【发布时间】：2012-06-30 01:29:35
【问题描述】：

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

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

有人有什么建议吗？

【问题讨论】：

标签： html canvas html5-canvas

【解决方案1】：

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

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

http://fabricjs.com/

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

【讨论】：

看演示，这正是我要找的！谢谢你这么快的回复。我明天上电脑试试看
@CampSoup1988 没问题。很高兴我能帮上忙。

【解决方案2】：

我在 google 上查找了一个有趣的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>

【讨论】：

我尝试实现这个脚本，因为我喜欢它不需要外部 javascript 文件的方式，而且我不需要担心在 fabricjs 中不需要的额外装饰，但是当我尝试添加时脚本的一个圆圈（弧），我现在得到一个空白画布。请问有什么建议吗？这是我的修改：jsfiddle.net/campsoup1988/VGfcz
我还想问一下，当输入字段之一具有焦点时（例如在 html/php 表单中），是否可以通过按 Enter 来提交表单
我还没有包括多边形工作，但我设法让圆工作（并用这个脚本简化了一点）jsfiddle.net/campsoup1988/TeGGx/89
@CampSoup1988 我不明白，你专门要求regular polygon，现在你要一些圈子的东西，顺便说一句，圈子没有边，所以我不知道为什么你确实将它添加到你的最后一个小提琴......而且似乎有问题，当你第二次绘制时它会覆盖最后一次绘制（它在绘制之前不会刷新），所以这里修复它：jsfiddle.net/QCUYB。您所说的外部 JS 是 jQuery，您可以从 jquery.com 免费下载它，有很多教程可以实现“聚焦”等...玩得开心！
我最初并没有要求一个圆圈，因为它看起来并不难。我计划将多边形放在圆圈内。我过去使用过几次 jQuery，主要用于表单验证。