Raphael
http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/
http://czpae86.iteye.com/blog/818953
Draw2D
http://draw2d.org/draw2d/index.html
javascript vector draw
http://www.c-point.com/javascript_vector_draw.htm
一个简单完整的例子:
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
window.onload = function () {
var paper = Raphael("canvas", 600, 480);
//draw circle
var circle = paper.circle(50, 40, 10);
//draw rect
var rect = paper.rect(10, 70, 50, 50).attr({fill: "#fff"});
var text=paper.text(10, 80, "node 1").attr({'text-anchor': 'start'});
//draw line
var line1= paper.path("M10 150L100 150");
var line2= paper.path("M10 150L10 180");
//draw text
var text=paper.text(10, 140, "11111");
//by default, x, y coordinates specify the center of the object!
//if you want "left and top " position, set following attribute
text.attr({'text-anchor': 'start'});
rect.mouseover(function() {
rect.attr({fill: "#f00"});
}).mouseout(function() {
rect.attr({fill: "#fff"});
}).click(function() {
alert("hello");
});
};
</script>