Javascript HTML5/画布多边形绘制工具？

对于一个正在进行的项目，我们正在研究使用HTML绘制形状的可能性。GoogleMaps（）中使用的绘图库非常好用。已经在Mapbox（）上找到了类似的东西，但它们都是基于地图的，我们只需要一张空表就可以在上面绘制一些形状

---

有人知道像上面的例子这样的独立工具吗？

您可以在画布上绘制的图像上绘制笔划

它非常简单，您甚至不需要附加库。只需使用本机路径命令

• 聆听用户的鼠标点击，并创建一个点击点数组

  // some test points
  // In production, these would be gathered through user mouseclicks
  var points=[]
  points.push({x:100,y:300});
  points.push({x:150,y:250});
  points.push({x:235,y:225});
  points.push({x:190,y:300});
  points.push({x:80,y:340});
  

• 这将绘制一条多段线：

  function drawPolyline(points){
      for(var i=0;i<points.length;i++){
          ctx.beginPath();
          ctx.moveTo(points[0].x,points[0].y);
          for(var i=1;i<points.length;i++){
              ctx.lineTo(points[i].x,points[i].y);
          }
          ctx.strokeStyle='blue';
          ctx.lineWidth=5;
          ctx.stroke();    
      }
  }
  

  function drawWaypoints(points){
      for(var i=0;i<points.length;i++){
          ctx.beginPath();
          ctx.arc(points[i].x,points[i].y,4,0,Math.PI*2);
          ctx.closePath();
          ctx.strokeStyle='black';
          ctx.lineWidth=1;
          ctx.stroke();
          ctx.fillStyle='white';
          ctx.fill();
      }
  }