技术文章
首页
关于我们
网站模板
客户案例
网站建设
程序开发
联系我们
技术文章
seo
asp.net
JavaSript
asp
网站建设
javascript画图形
时间：2008-08-26 点击：1434
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>emu's paint without vlm</title> </head> <body> <button onclick="testDrawCurve()">画曲线</button> <button onclick="testDrawArc()">画弧线</button> <button onclick="testDrawCircle()">画圆</button> <button onclick="testDrawLine()">画线</button> <button onclick="testDrawRectangle()">画矩形</button> <button onclick="testDrawPie()">画饼图</button> <div id=div1></div> <SCRIPT LANGUAGE="JavaScript"> <!-- function testDrawCurve() { div1.innerHTML = drawCurve(); } function testDrawArc() { div1.innerHTML =drawArc(150,150,100,0,270,"viloet") } function testDrawCircle() { div1.innerHTML = drawCircle(200,200,150,"blue"); } function drawCircle(x0,y0,radius,color) { return drawArc(x0,y0,radius,0,360,color) } function testDrawLine() { div1.innerHTML = drawLine(100,200,500,200,"yellow")+drawLine(300,100,300,400,"black")+drawLine(600,400,100,100,"violet") } function testDrawRectangle() { div1.innerHTML = drawRectangle(200,100,600,200,"blue")+drawRectangle(100,200,400,500,"red") } function testDrawPie() { div1.innerHTML = drawPie(300,200,120,0,45,"red"); } function drawLine(x0,y0,x1,y1,color) { var rs = ""; if (y0 == y1) //画横线 { rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" height=3 width="+Math.abs(x1-x0)+"></td></table>"; } else if (x0 == x1) //画竖线 { rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width=1 height="+Math.abs(y1-y0)+"></td></table>"; } else { var lx = x1-x0 var ly = y1-y0 var l = Math.sqrt(lx*lx+ly*ly) rs = new Array(); for (var I=0;I<l;I+=1) { var p = I/l; var px = x0 + lx*p; var py = y0 + ly*p; rs[rs.length] = "<table style='top:"+py+";left:"+px+";position:absolute'><td bgcolor="+color+" height=3></td></table>"; } rs = rs.join(""); } return rs } function drawRectangle(x0,y0,x1,y1,color) { if (x0 == x1 || y0 == y1) return; if (x0>x1) {var t=x0;x0=x1;x1=t} if (y0>y1) {var t=y0;y0=y1;y1=t} return "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"></td></table>"; } function drawPie(x0,y0,radius,startAngle,endAngle,color) { var rs = drawArc(x0,y0,radius,startAngle,endAngle,color) startAngle = startAngle/360*Math.PI*2; endAngle = endAngle/360*Math.PI*2; var startx=Math.sin(startAngle)*radius+x0; var endx=Math.sin(endAngle)*radius+x0; var starty=Math.cos(startAngle)*radius+y0; var endy=Math.cos(endAngle)*radius+y0; rs += drawLine(x0,y0,startx,starty,color) rs += drawLine(x0,y0,endx,endy,color) return rs; } function drawArc(x0,y0,radius,startAngle,endAngle,color) { rs = new Array(); tmpar = new Array(); startAngle = startAngle/360*Math.PI*2; endAngle = endAngle/360*Math.PI*2; for (var I=startAngle;I<endAngle;I+=(1/radius)) { var dx = Math.sin(I)*radius+x0; var dy = Math.cos(I)*radius+y0; rs[rs.length] = "<table style='top:"+dy+";left:"+dx+";position:absolute'><td bgcolor="+color+" height=3></td></table>"; } return (rs.join("")); } function drawCurve() { var rs = new Array(); for (var I=0;I<2*Math.PI;I+=.02) { var x = 300-Math.sin(I)*100 var y = 300-Math.cos(I)*100 rs[rs.length] = "<table style='top:"+x+";left:"+(I*100+90)+";position:absolute'><td bgcolor=blue height=3></td></table>"; rs[rs.length] = "<table style='top:"+y+";left:"+(I*100+90)+";position:absolute'><td bgcolor=violet height=3></td></table>"; } return rs.join(""); } //--> </SCRIPT> </body> </html>
鼠标跟随提示说明
用CSS实现的中英文双语导航菜单
兼容FF/IE7的可移动弹出层，值得收藏
VML+javascript生成曲线图
javascript画图形
> 返回
地址：上海市普陀区胶州路941号长久商务中心 电话： QQ：
© Copyright 2012 上海网络
Product
All Rights Reserved