Question

我希望能够在HTML5 Canvas元素上绘制一些基本的矢量形状。

用户应该可以使用鼠标直接绘制其中任何一个：

方
环
多边形

在Canvas上 - 这些稍后将用于图像上的热点。

重要的是，用户应该能够通过直接在画布中单击来自己绘制这些矢量形状。

是否有现有的图书馆可以帮助解决这个问题？

如果没有图书馆，请考虑我是一名经验丰富的网页设计师，具有出色的javascript知识，但我对编程向量的经验很少。我最好去哪里解决这个问题，以便建立我需要的东西？

Answer 1

您可以将这个小片段用于第一次实验......

对于您必须使用的各个圈子：

mousedown（getCoordinates） mouseup（getCoordinates）

计算这两个点之间的距离，即半径。

为Square，Circle和Polygon构建一个html选项列表。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <style>
    canvas{border:1px solid #ccc;}
  </style>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    function getMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect();
      return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
      };
    }
    canvas.addEventListener('click', function(evt) {
            var mousePos = getMousePos(canvas, evt);
            context.beginPath();
            context.arc(mousePos.x,mousePos.y,5,0,2*Math.PI);
            context.stroke();
          }, false);
  </script>
</body>
</html>

Answer 2

在这种情况下，

fabricjs.com是你的朋友;）

HTML5画布上的用户可编辑矢量形状

2 个答案: