我想在 mozilla 画布中实现一个绘图窗格（与 visio 为流程图提供的类似但更小的版本）。
对此有任何支持吗？
到目前为止，我一直使用 jQuery 创建矩形并移动它们。虽然这在这里很容易......创建线（对象之间的连接）是一个真正的痛苦。我正在使用一些粗略的方法在javascript中逐像素着色，它既不好看也不可扩展，而且我需要构建很多函数来使连接坚持一组对象等。
有谁知道画布和那里可用的功能是否会让我的生活更轻松。
在这种情况下，任何指向什么是更好的解决方案的指针。（我希望它不是小程序）
提前致谢。
是的，您可以为此使用画布。绘制简单的形状并缩放它们非常简单。
但是，如果您需要在绘制形状后对其进行编辑，您将不得不投入更多的工作。Canvas 以所谓的“立即模式”进行绘制，这意味着它不知道您在绘制后立即绘制了什么。它不跟踪绘制的形状。如果您需要，您将不得不自己实施。
我已经使用isPointInPath()可用于测试用户是否单击特定点的功能来完成此操作。我使用 MVC 模式（模型-视图-控制器）跟踪我绘制的对象，以便找出单击了哪个形状。
另一种选择可能是 fabric.js，它应该非常接近您的需要。
请点击此链接： https ://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
LMK 如果有帮助！
以下步骤可能会有所帮助：
1. 创建画布并将其添加到 DOM：
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. 设置画布的宽度-高度：
myCanvas.width=200;
myCanvas.height=200;
3. 获取画布的上下文并开始在其
var gc = myCanvas.getContext('2d');
上绘制：4. 绘制矩形的代码：
gc.strokeRect(50,50,50,50);
5. 之后这个，在画布上添加 mousehandlers(mousedown,mousemove,mouseup)/touchhandlers(touchdown,touchmove,touchup) 并相应地处理移动。