兼容FireFox 用javascript写的一个画图函数

发布：dxy 发布日期：2007-8-28 20:39:03 字体：[ ] 类型：转载

早晨醒来突然想写一个画图函数，以前在网上看到有人做过，但都是用VML做的，只有ie支持。
偶这个是用

形成的绝对定位的点画出来的，兼容各种浏览器。

点击运行可以看到:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""> <html
xmlns=""> <head> <meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title> <style type="text/css">
.style1 { font-size: x-small; } </style> </head>
<body> <span class="style1"> <script
type="text/javascript"> function makedot(x,y){ //画点函数
document.write("<div
style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>")
} /** 函数功能：根据给定的圆心和半径画圆 函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。 */
function circle(x,y,r){ //(x,y)圆心，r半径 var dotx,doty,radio; var
Pi=Math.PI; makedot(x,y); for(var i=0;i<360;i+=0.5){ radio=i*Pi/180;
dotx=r*Math.cos(radio)+x; doty=r*Math.sin(radio)+y makedot(dotx,doty);
} } /** 函数功能：根据指点矩形左上角坐标及长宽绘制矩形。 函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标 */ function
rect(x,y,w,h){ //(x,y)左上角坐标,w,h 宽与高 for(var i=0;i<w;i++){
makedot(x+i,y); makedot(x+i,y+h); } for(var i=0;i<h;i++){
makedot(x,y+i); makedot(x+w,y+i); } } /** 函数功能：根据两点坐标画直线。
函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理 */ function
line(x1,y1,x2,y2){ var slope=(y2-y1)/(x2-x1); //斜率 var diff=x2-x1;
if(x1<x2){ for(var i=0;i<diff;i++){ makedot(x1+i,y1+slope*i); }
}else if(x1>x2){ for(var i=0;i>diff;i--){
makedot(x1+i,y1+slope*i); } }else{ //画垂直线 var temp=y2-y1;
if(temp>0){ for(var i=0;i<temp;i++){ makedot(x1,y1+i); } }else{
for(var i=0;i>temp;i--){ makedot(x1,y1+i); } } } } /**
函数功能：根据给定的三点坐标画三角形 函数思路：直接利用画线函数画三条线即可 */ function
triangle(x1,y1,x2,y2,x3,y3){ line(x1,y1,x2,y2); line(x2,y2,x3,y3);
line(x1,y1,x3,y3); } /** 函数功能：根据给定的一系列坐标点画多边形
函数思路：循环读取坐标点，在当前坐标点与下一坐标点之间连线 */ function polygon(){ var
args=arguments.length; if(args%2!=0) return -1; var realargs=args/2;
//坐标个数 for(var i=0;i<realargs-1;i++){
line(arguments[i*2],arguments[i*2+1],arguments[i*2+2],arguments[i*2+3]);
} line(arguments[i*2],arguments[i*2+1],arguments[0],arguments[1]); }
circle(500,500,200); rect(100,100,200,100);
triangle(200,200,100,400,300,400);
polygon(300,300,400,100,600,100,700,300,600,500,400,500);
</script> </span> <script type="text/javascript" src="/js/jquery.qqFace.js"></script>
</body> </html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

阅读(852) | 评论(0) | 转发(0) |

上一篇：javascript实现的动态添加表单元素input,button等(appendChild)

下一篇：真见识了-全代码编写的图片

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6