问题
Any suggestion for a JavaScript interactive drawing library? Just need to draw lines, polygons, texts of different colors. IE/Firefox/Opera/Safari compatible.
回答1:
Raphael is pretty cool for that, and works across browsers since it uses VML (for MSIE) and SVG (for everything else).
回答2:
John Resig's Processing.js is a nice framework for that.
回答3:
You can use the canvas object directly to draw in 2D. IE requires the excanvas library.
http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas
回答4:
Try http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm. It's the best I've found (without resorting to SVG) and works in most browsers without add-ins.
回答5:
Drawing text with the canvas tag is a big pain. Your options are to use regular divs absolutely positioned in the right places, or find/write a font layout engine (example), or wait for a new standard to be implemented that lets you draw text. SVG deals with this much better.
In IE you have ExplorerCanvas to simulate the canvas API with IE's own VML markup. However, native VML can do text on a path and such things much like SVG. I think theoretically if you want complex text handling you'd want SVG and VML like the Raphael library that Dan mentioned.
You might also consider Flash for a moment before starting.
回答6:
As mentioned above, canvas is the way you should go. IE doesn't support it natively, so you'll need to download ExCanvas to ensure cross-browser compatibility. I'd recommend looking at Ajaxian for some projects that use the canvas tag.
回答7:
Checkout the jQuery Drawing plugin, and you can also look at the Mozilla Canvas reference and tutorial.
回答8:
Also mxGraph. This doesn't use excanvas for IE. Excanvas is way slower than using VML, specifically, re-using the same VML nodes rather than deleting, adding DOM nodes for redrawing. This is often a overlooked point, but excanvas on IE performance is just awful.
回答9:
Depending on how cross-browser you need to be and your goal of doing the output, you might look into the Canvas element and the related javascript.
Canvas
回答10:
D3.js
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
Take a look at this discussion too.
来源：https://stackoverflow.com/questions/96486/javascript-drawing-library