我正在寻找让用户画一条线（在图像上）的 Javascript 代码。
就像 Photoshop 中的线条工具一样（例如）：
用户单击图像，拖动鼠标（而起点和鼠标点之间的线是在鼠标拖动时动态绘制的）。
我还需要一个可调用函数来向页面发送开始和结束坐标。
我发现这个非常好的区域选择脚本：http: //www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
我找到了许多用于绘制线条（以及 JS 中的其他形状）的脚本，但找不到我要找的东西。
谢谢
由于没有标准的绘图方法，如果你想支持旧的浏览器和 IE，你将需要使用一个库。该库将处理与SVG或 Microsoft 的绘图的跨平台问题VML
我推荐Raphael JS
raphael.js 是一个轻量级的 JavaScript 渲染工具（MIT 许可），适用于 FF、Safari、Chrome 和 IE6+。
它对前 3 个使用 SVG，对 IE 使用 VML，但 API 在浏览器之间是相同的，并且非常好用。
例如
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
我用它在拖动时画了一条线，并且可以保证它的易用性
可以在此处找到用于在 javascript 中绘制线条的跨浏览器解决方案，无需任何外部库：http: //bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript
这适用于所有浏览器，包括 IE。
考虑使用canvas元素来显示图像。然后，在上面画一条线（或其他任何东西）是微不足道的。
如果您的数学足够好，则可以（尽管很疯狂）在没有画布标签的情况下使用大多数现代浏览器中的一种（视情况而定）：
通过创建例如。一个 1px 高的 div，例如。您的“线条”的边框顶部，并使用鼠标拖动事件来定位和旋转它。
疯狂就是这样，但这将是一个非常有趣的练习。（你应该使用 Raphael JS 之类的东西，它是跨浏览器和理智的 - 见上文）
我正在做类似的事情。在画布上画一条线非常简单。您可以从我的代码here中获取。
http://p-func.com/html5_test/test2.html
只需跟随 mousedown 侦听器即可。
虽然我发现，当想要加载图像时，使用 raphael 库可能会更好。我看到这个是因为 Canvas 似乎表现得像一个平面图像。因此，如果我想为其添加一个瞄准器，然后允许用户操作该图像，它不会让我这样做（除非我缺少某些东西）。
Raphael 允许您绘制并仍然使用这些绘图和图像作为对象。
如果支持，您可以使用画布，在 IE 中您可以使用过滤器旋转功能。因为这里适用于两者：