logo标签列表

使用动态用户输入的HTML5画布

htmlcanvashtml5-canvas
3

我先承认一下，我以前从未使用过canvas，所以我不知道这是否可能，但我似乎找不到解决方案。

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

有人有什么建议吗？

2个回答
3
你应该使用JavaScript库来更容易地在画布上绘图。
这是一个非常好的演示功能的例子: http://fabricjs.com/ 而这个库就是Fabric.js，你可以从这里下载: http://fabricjs.com/
看了演示，这正是我要找的！非常感谢您的快速回复。明天我上电脑时会试一下。 - CampSoup1988
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>
我尝试实现这个脚本，因为我喜欢它不需要外部JavaScript文件，而且我不需要担心在fabricjs中不需要的额外花哨效果，但是当我尝试将一个圆形（弧形）添加到脚本时，现在画布变成了空白。请问有什么建议吗？这是我的修改：http://jsfiddle.net/campsoup1988/VGfcz/ - CampSoup1988
我还想问一下，在一个输入框有焦点时，是否可以只按Enter键就提交表单（如html/php表单）？ - CampSoup1988
我还没有包括多边形的工作，但我设法让圆形工作了（并且使用此脚本进行了简化）。http://jsfiddle.net/campsoup1988/TeGGx/89/ - CampSoup1988
@CampSoup1988，我不明白，你特别要求一个“正多边形”，现在又问一些关于圆的东西，顺便说一下，圆没有边，所以我不知道为什么你在最后一个fiddle中添加了那个。而且似乎有些问题，当你第二次绘制时，它会覆盖上一次的绘制（在绘制之前不会刷新），所以这里是修复它的方法：http://jsfiddle.net/QCUYB/。你提到的外部JS是jQuery，你可以从jquery.com免费下载它，有很多教程可以实现像“on focus”等功能...玩得开心！ - HamZa
我最初并没有要求画一个圆，因为它似乎不难实现。我计划将多边形放在圆内。过去我用过几次jQuery，主要是用于表单验证。 - CampSoup1988
显示剩余4条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接