javascript 绘制各种图形
2009-05-24 14:30 贪婪的小猪 阅读(268) 评论(0) 编辑 收藏 举报
Code<script type="text/javascript" src="http://www.walterzorn.com/walterzorn.js"></script>
<script type="text/javascript" src="http://www.walterzorn.com/scripts/wz_jsgraphics.js"></script>
<FORM action=""><TABLE cellSpacing=0>
<TBODY>
<TR align=right>
<TD><INPUT style="WIDTH: 100%" onclick=DRAW(this.value) value=drawLine() type=button></TD>
<TD>x1<INPUT value=50 maxLength=4 size=5 name=dl_x1> </TD>
<TD>y1<INPUT value=-330 maxLength=4 size=5 name=dl_y1> </TD>
<TD>x2<INPUT value=500 maxLength=4 size=5 name=dl_x2> </TD>
<TD>y2<INPUT value=800 maxLength=4 size=5 name=dl_y2> </TD>
<TD><BR></TD>
<TD><BR></TD></TR>
<TR align=right>
<TD><INPUT style="WIDTH: 100%" onclick=DRAW(this.value) value=drawRect() type=button></TD>
<TD>x<INPUT value=130 maxLength=4 size=5 name=dr_x> </TD>
<TD>y<INPUT value=20 maxLength=4 size=5 name=dr_y> </TD>
<TD>w<INPUT value=350 maxLength=4 size=5 name=dr_w> </TD>
<TD>h<INPUT value=60 maxLength=4 size=5 name=dr_h> </TD>
<TD><BR></TD>
<TD><BR></TD></TR>
<TR align=right>
<TD><INPUT style="WIDTH: 100%" onclick=DRAW(this.value) value=fillRect() type=button></TD>
<TD>x<INPUT value=-70 maxLength=4 size=5 name=fr_x> </TD>
<TD>y<INPUT value=130 maxLength=4 size=5 name=fr_y> </TD>
<TD>w<INPUT value=160 maxLength=4 size=5 name=fr_w> </TD>
<TD>h<INPUT value=100 maxLength=4 size=5 name=fr_h> </TD>
<TD><BR></TD>
<TD><BR></TD></TR>
<TR align=left>
<TD align=right><INPUT onclick=DRAW(this.value) value=fillPolygon() type=button></TD>
<TD colSpan=6>x<INPUT value=80,126,-30,-60 size=25 name=fp_x> y<INPUT value=0,130,40,100 size=25 name=fp_y> </TD></TR>
<TR align=right>
<TD><INPUT style="WIDTH: 100%" onclick=DRAW(this.value) value=drawEllipse() type=button></TD>
<TD>x<INPUT value=320 maxLength=4 size=5 name=do_x> </TD>
<TD>y<INPUT value=-20 maxLength=4 size=5 name=do_y> </TD>
<TD>w<INPUT value=250 maxLength=3 size=5 name=do_w> </TD>
<TD>h<INPUT value=140 maxLength=4 size=5 name=do_h> </TD>
<TD><BR></TD>
<TD><BR></TD></TR>
<TR align=right>
<TD><INPUT style="WIDTH: 100%" onclick=DRAW(this.value) value=fillEllipse() type=button></TD>
<TD>x<INPUT value=75 maxLength=4 size=5 name=fo_x> </TD>
<TD>y<INPUT value=140 maxLength=4 size=5 name=fo_y> </TD>
<TD>w<INPUT value=240 maxLength=3 size=5 name=fo_w> </TD>
<TD>h<INPUT value=400 maxLength=4 size=5 name=fo_h> </TD>
<TD><BR></TD>
<TD><BR></TD></TR>
<TR align=right>
<TD><INPUT style="WIDTH: 100%" onclick=DRAW(this.value) value=fillArc() type=button></TD>
<TD>x<INPUT value=350 maxLength=4 size=5 name=fa_x> </TD>
<TD>y<INPUT value=140 maxLength=4 size=5 name=fa_y> </TD>
<TD>w<INPUT value=240 maxLength=4 size=5 name=fa_w> </TD>
<TD>h<INPUT value=400 maxLength=4 size=5 name=fa_h> </TD>
<TD>arc begin<INPUT value=25 maxLength=6 size=5 name=fa_angA>°</TD>
<TD>arc end<INPUT value=290 maxLength=6 size=5 name=fa_angZ>°</TD></TR>
<TR>
<TD colSpan=7>
<TABLE cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD>setColor("#<INPUT value=00aaaa maxLength=6 size=7 name=Color>") </TD>
<TD align=middle>setStroke(<INPUT value=4 maxLength=2 size=3 name=Stroke>) </TD>
<TD align=right>setStroke(Stroke.DOTTED<INPUT type=checkbox name=Dotted>) </TD></TR></TBODY></TABLE><INPUT style="WIDTH: 290px; FONT-WEIGHT: bold" onclick=;if(jg2)jg2.clear(); value="clear() this test area" type=button> </TD></TR>
<TR>
<TD height=250 colSpan=7>
<DIV style="POSITION: relative; HEIGHT: 1px; TOP: 10px; LEFT: -80px" id=dt>
<DIV style="FONT-SIZE: 0px"></DIV></DIV>
<DIV style="Z-INDEX: 2; POSITION: relative; WIDTH: 400px; HEIGHT: 250px; OVERFLOW: visible; TOP: 0px; LEFT: 0px" id=test>
<CENTER><SMALL>Test Canvas</SMALL></CENTER>
<DIV style="FONT-SIZE: 0px"></DIV></DIV></TD></TR></TBODY></TABLE></FORM>
<script defer=defer>
var no_dhtm = (document.layers || window.opera && !document.defaultView);
function ZOOM()
{
if (document.body && document.body.style && typeof document.body.style.zoom != "undefined")
{
if (document.body.style.zoom=="400%")
document.body.style.zoom = "100%";
else
{
document.body.style.zoom = "400%";
alert('You\'ve doubleclicked on the document.\nDoubleclick again to unzoom.');
}
}
}
document.ondblclick=ZOOM;
function DRAW(shape)
{
if (window.event) event.cancelBubble = true;
var f=document.forms[0];
var color = ''+f.Color.value;
for (var z = 0; z<color.length; z++)
if (isNaN(parseInt(color.charAt(z), 16)))
color = color.substring(0, z) + '6' + color.substring(z+1);
var t0 = (new Date()).getTime();
jg2.setColor("#"+color);
jg2.setStroke(f.Dotted.checked? Stroke.DOTTED : parseInt(f.Stroke.value));
if (shape=="drawLine()")
jg2.drawLine(parseInt(f.dl_x1.value), parseInt(f.dl_y1.value), parseInt(f.dl_x2.value), parseInt(f.dl_y2.value));
else if (shape=="drawRect()")
jg2.drawRect(parseInt(f.dr_x.value), parseInt(f.dr_y.value), parseInt(f.dr_w.value), parseInt(f.dr_h.value));
else if(shape=="fillRect()")
jg2.fillRect(parseInt(f.fr_x.value), parseInt(f.fr_y.value), parseInt(f.fr_w.value), parseInt(f.fr_h.value));
else if(shape=="drawEllipse()")
jg2.drawEllipse(parseInt(f.do_x.value), parseInt(f.do_y.value), parseInt(f.do_w.value), parseInt(f.do_h.value));
else if(shape=="fillEllipse()")
jg2.fillEllipse(parseInt(f.fo_x.value), parseInt(f.fo_y.value), parseInt(f.fo_w.value), parseInt(f.fo_h.value));
else if(shape=="fillArc()")
jg2.fillArc(parseInt(f.fa_x.value), parseInt(f.fa_y.value), parseInt(f.fa_w.value), parseInt(f.fa_h.value), parseFloat(f.fa_angA.value.replace(/,/, ".")), parseFloat(f.fa_angZ.value.replace(/,/, ".")));
else if(shape=="fillPolygon()")
{
var pgx = f.fp_x.value.split(',');
var pgy = f.fp_y.value.split(',');
var comm = '\n \nNote:\nValues must be separated with commas from each other.';
if (pgx.length!=pgy.length) alert('The number of x und y values must be equal.'+comm);
else
{
for (var z = 0; z<pgx.length; z++)
{
if (isNaN(pgx[z] = parseInt(pgx[z])) || isNaN(pgy[z] = parseInt(pgy[z])))
{
alert('Invalid x or y value.'+comm);
return;
}
}
jg2.fillPolygon(pgx, pgy);
}
}
jg2.paint();
var t1 = (new Date()).getTime() - t0;
jg3.clear();
jg3.setColor('#'+color);
jg3.setFont('verdana,geneva,sans-serif', '12px', Font.BOLD);
jg3.drawString(t1 + ' milliseconds', 0, 10);
jg3.paint();
}
var jg2=new jsGraphics("test");
var jg3 = new jsGraphics("dt");
function D()
{
var wc = (window.innerWidth? innerWidth
: (document.documentElement && document.documentElement.clientWidth)? document.documentElement.clientWidth
: (document.body && document.body.clientWidth)? document.body.clientWidth
: document.getElementsByTagName? document.getElementsByTagName('body')[0].offsetWidth
: 800) >>1;
var dy = no_dhtm? 115 : 0;
var jg = new jsGraphics(no_dhtm? null : "main");
jg.setColor("#ff9900");
jg.drawEllipse(16, 240+dy, 59, 130);
jg.setFont("arial,helvetica,sans-serif", "11px", Font.PLAIN);
jg.drawString("<nobr>.drawEllipse( )<\/nobr>",35, 180+dy);
jg.drawString(".fillPolygon( )", 360, 66+dy);
jg.drawLine(62, 197+dy, 48, 234+dy);
jg.drawLine(48, 234+dy, 45, 224+dy);
jg.drawLine(49, 234+dy, 57, 228+dy);
jg.setColor("#008800");
jg.drawOval((250+wc+300)>>1, 4+dy, 64, 64);
jg.drawString("These are not image files.<br>Shapes & text have been dynamically drawn with wz_jsgraphics.js.", ((wc+280)>>1)-100, 190+dy);
jg.setStroke(2);
jg.setColor("#ff99b6");
jg.drawLine(120, -60+dy, 265, 150+dy);
jg.setColor("#ff0080");
jg.setStroke(1);
jg.drawString("<nobr>.drawLine( )<\/nobr>", 190, 145+dy);
var polylx=new Array(420, ((wc+280)>>1)+240, ((wc+280)>>1)+120, (wc<<1)-100);
var polyly=new Array(160+dy, 112+dy, 350+dy, 450+dy);
jg.drawPolyline(polylx, polyly);
jg.drawString(".drawPolyline( )", ((wc+280)>>1)+126, 155+dy);
jg.setColor("#ffe600");
jg.fillPolygon(new Array(383, 390, 397, 420, 397, 390, 383, 360), new Array(23+dy, 0+dy, 23+dy, 30+dy, 37+dy, 60+dy, 37+dy, 30+dy));
var polygx=new Array(177, 247, 115);
var polygy=new Array(24+dy, 45+dy, 140+dy);
jg.setColor("#0000cc");
jg.drawPolygon(polygx, polygy);
jg.drawString(".drawPolygon( )", 256, 30+dy);
jg.setColor("#aabbff");
jg.setStroke(5);
jg.drawOval(300, 110+dy, 80, 50);
// Smiley
jg.fillOval(wc+292, 36+dy, 15, 15);
jg.setColor("#990099");
jg.setStroke(Stroke.DOTTED);
jg.drawRect(wc+280, dy, 40, 50);
jg.drawString("<nobr>.drawRect( )<\/nobr>", wc+210, 20+dy);
jg.setStroke(1);
jg.drawOval(wc+292, 36+dy, 14, 14);
jg.setColor("#000033");
jg.fillRect(wc+295, 41+dy, 2, 2);
jg.fillRect(wc+302, 41+dy, 2, 2);
jg.drawLine(wc+295, 45+dy, wc+296, 46+dy);
jg.drawLine(wc+297, 47+dy, wc+301, 47+dy);
jg.drawLine(wc+301, 47+dy, wc+303, 45+dy);
jg.setColor("#0000cc");
jg.drawString(".fillEllipse( )", wc+214, 36+dy);
// Pie
jg.setColor("#0000ff");
jg.drawString(".fillArc( )", wc+240, 120+dy);
jg.setColor("#999999");
jg.fillOval(wc+210, 150+dy, 120, 80);
jg.setColor("#ff8080");
jg.fillArc(wc+210, 140+dy, 120, 80, 330, 40);
jg.setColor("#8080ff");
jg.fillArc(wc+210, 140+dy, 120, 80, 40, 140);
jg.setColor("#ff80ff");
jg.fillArc(wc+210, 140+dy, 120, 80, 140, 180);
jg.setColor("#80bb80");
jg.fillArc(wc+210, 140+dy, 120, 80, 180, 280);
jg.setColor("#ffcc66");
jg.fillArc(wc+210, 140+dy, 120, 80, 280, 330);
jg.paint();
}
if(document.all && !document.getElementById)
{
window.onload = function()
{
window.setTimeout("D();", 100);
}
}
else D();
</script>
