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

我希望能够在HTML5画布元素上绘制一些基本的向量形状

用户应能够使用鼠标直接绘制以下任意图形：

• 方格

• 圈

• 多边形

在画布上-这些将稍后用于图像上的热点

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

是否有一个现有的图书馆可以帮助这一点

---

如果没有库，请考虑我是一位经验丰富的网页设计师，对JavaScript有很好的了解，但我对编程向量的体验很少。哪里是我修复这个问题的最好地方，这样我就可以构建我需要的东西？

你可以在第一次实验中使用这个小片段

对于单个圆圈，必须使用：

鼠标向下（获取坐标） 鼠标（获取坐标）

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

为正方形、圆形和多边形构建html选项列表

帆布
画布{边框：1px实心#ccc；}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}
canvas.addEventListener（'click'，函数（evt）{
var mousePos=getMousePos（canvas，evt）；
context.beginPath（）；
arc（mousePos.x，mousePos.y，5,0,2*Math.PI）；
stroke（）；
}，假）；

您可以在第一次实验中使用这个小片段

对于单个圆圈，必须使用：

鼠标向下（获取坐标） 鼠标（获取坐标）

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

为正方形、圆形和多边形构建html选项列表

帆布
画布{边框：1px实心#ccc；}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}
canvas.addEventListener（'click'，函数（evt）{
var mousePos=getMousePos（canvas，evt）；
context.beginPath（）；
arc（mousePos.x，mousePos.y，5,0,2*Math.PI）；
stroke（）；
}，假）；

在这种情况下是你的朋友；）

在这种情况下是你的朋友；）

@Phil我最终使用了fabricjs-加上这个作为答案，我会给你一个答案tick@jimmery完成（：@Phil我最终使用了fabricjs-将此添加为答案，我会给你一个答案tick@jimmery完成（：