我想在 mozilla 画布中实现一个绘图窗格（与 visio 为流程图提供的类似但较小的版本）。
这有什么支持吗？
到目前为止，我一直使用 jQuery 创建矩形并移动它们。虽然这在这里很容易......创建线（对象之间的连接）是一个真正的痛苦。我正在使用一些粗略的方式在 javascript 中逐像素着色，它既不好看也不可扩展，而且我需要构建很多函数来使连接坚持一组对象等。
有谁知道画布和那里可用的功能是否会让我的生活更轻松。
任何指向在这种情况下更好的解决方案的指针。 （我希望不是小程序）
提前致谢。
【问题讨论】：
标签： javascript jquery html user-interface canvas
是的，您可以为此使用画布。绘制简单的形状并缩放它们非常简单。
但如果您需要在绘制完形状后对其进行编辑，您将不得不投入更多的工作。 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) 并相应地处理移动。
【讨论】：