js绘图的问题

Question

各位大虾  有没有用JS绘图的好方法啊  网上看了一下  一种是用div设置style的方法来画线  还有一种看不太明白
<object id=DirectDraw 
classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" 
style="positiion:absolute;top:0;left:0;width:320;height:200" 
> 
<param name="line0001" value="绘图指令1"> 
<param name="line0002" value="绘图指令2"> 
... 
</object> 
绘图指令分类： 
(一)常见形状 
1.矩形类 //rotation是以度为单位的旋转角度 
Rect(x ,y, width, height, rotation) //矩形 
Oval(x ,y, width, height, rotation) //椭圆 
RoundRect(x ,y, width, height, arcWidth, arcHeight, rotation) 
2.弧形类 
Arc(x ,y, width, height, startAngle, arcAngle, rotation) //弧形 
Pie(x ,y, width, height, startAngle, arcAngle, rotation) //饼图 
3.多边形类 
Polygon(nPoints, x1, y1, x2, y2, [x3, y3, ....], rotation) //闭合 
Polyline(nPoints, x1, y1, x2, y2, [xn, yn, ....], rotation) //不闭合 
(二)效果函数 
1.线条效果 
SetLineColor(r, g, b) //设置画线颜色 
SetLineStyle(style) //style=(1:实线;2:虚线;0:隐藏) 
2.填充效果 
SetFillColor(r, g, b, backr, backg, backb) 
SetFillStyle(style) //style=(1:实心;2:透明;3:-;4:|;5:\;6:/;7:+;8:x) 
(三)文字输出函数 
SetFont('字体',width,height,r,g,b) //设置字体 
Text('要输出的文字内容', x,y,z) //输出文字 
控制函数 //定义<object>后在<script></script>里使用。 
引用格式：DirectDraw.FunctionName() 
rotate(x-rotation, y-rotation, z-rotation) //旋转 
scale(x-scale,y-scale,z-scale) //缩放 
translate(x-coordinate,y-coordinate,z-coordinate) //平移 
setIdentity() //复原 
clear() //清除,清除后无法恢复！ 这个不知道怎么用  大家帮帮忙  谢谢啦

Answer 1

VML或SVG，当前只好这样画图。用flash估计很不错的……

Answer 2

谢谢  我现在试着用java的绘图功能画图...呵呵

Answer 3

也可以参考使用Canvas：
<canvas id="x" width="400" height="300" style="border:1px solid #eee;">hello,canvas!</canvas>
<script type="text/javascript" src="http://www.easyui.org.cn/easyui.js"></script>
<script type="text/javascript">
var dx = document.getElementById('x');
var client = navigator.userAgent+'\n'+navigator.appVersion+'\n\n';
var dimg = new Image();dimg.src = 'http://www.v-ec.com/ijc/jslab_logo.png';
var show = function(){
    if(!dx.getContext){alert(client+'不支持Canvas');return;}
    var dxC = dx.getContext('2d');
    dxC.fillStyle = '#00f';
    dxC.strokeStyle = '#f00';
    dxC.lineWidth = 2;    easyUI.queue([
        function(){dxC.fillRect(0,0,400,300);},
        function(){dxC.clearRect(10,10,380,280);},
        function(){dxC.fillStyle='rgba(0,0,0,0.2)';dxC.fillRect(15, 15,  370, 30);},
        function(){dxC.strokeStyle='#AC904B';dxC.fillStyle='#EACA06';dxC.beginPath();dxC.moveTo(50,50);
            dxC.lineTo(80,100);dxC.lineTo(20,100);dxC.lineTo(50,50);dxC.fill();dxC.stroke();dxC.closePath();
        },
        function(){if(!dxC.fillText){alert(client+'不支持fillText');return;}dxC.fillStyle='#000';dxC.font = 'bold 30px Arial';dxC.fillText('!',46,90);},
        function(){dxC.strokeStyle='#2A66B2';dxC.fillStyle='#2D7FE2';dxC.beginPath();
            dxC.arc(120,75,25,0,Math.PI*2,true);dxC.fill();dxC.stroke();dxC.closePath();
        },
        function(){dxC.drawImage(dimg,50,150);}
    ],1000);
};window.onload = show;
</script>