javascript画图

Raphael

http://raphaeljs.com/

http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

http://czpae86.iteye.com/blog/818953

http://czpae86.iteye.com/blog/819225

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>