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

更新时间：2007年08月28日 20:39:03 作者：

早晨醒来突然想写一个画图函数，以前在网上看到有人做过，但都是用VML做的，只有ie支持。
偶这个是用<div>形成的绝对定位的点画出来的，兼容各种浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <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>  </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript canvas绘制圆形加载进度条
这篇文章主要为大家详细介绍了JavaScript canvas绘制圆形加载进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
JS数组合并push与concat区别分析
这篇文章主要介绍了JS数组合并push与concat区别,结合实例形式分析了JavaScript中针对数组合并操作使用push与concat的区别,需要的朋友可以参考下
2015-12-12
ie8 不支持new Date(2012-11-10)问题的解决方法
使用JS的时候也碰到了如下问题，后来经过修改，在IE8环境里，下面的代码是可用的，下面与大家分享下ie8 不支持new Date的解决方法，有类似问题的朋友可以参考下
2013-07-07
JavaScript网页定位详解
本篇文章主要是对JavaScript网页定位进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
JavaScript中十种一步拷贝数组的方法实例详解
JavaScript中我们经常会遇到拷贝数组的场景，但是都有哪些方式能够来实现呢，我们不妨来梳理一下，感兴趣的朋友跟随小编一起看看吧
2019-04-04
页面回到顶部的三种实现(锚标记，js)
本文不再介绍，大家根据自己需要选择其中的一种即可，总之简约最美的，能减少代码就减少代码，能不调用的就别调用，要不是天缘博客的文章都是牛长也不会添加这个功能
2012-10-10
JS模拟实现ECMAScript5新增的数组方法
ECMAScript5 新增了十个数组方法，这些方法只有在ie9及以上浏览器中可以被使用，下面是对于这些方法的模拟实现简单介绍下，需要的朋友参考下
2017-03-03
JS中使用textPath实现线条上的文字
最近项目经理交给我一下新项目，要实现关系图，需要在线条上绘制文字。下面小编把使用textPath实现线条上的文字功能分享到脚本之家平台供大家参考
2017-12-12
JavaScript中创建类/对象的几种方法总结
这篇文章主要是对JavaScript中创建类/对象的几种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
Js中parseInt的使用及注意事项
parseInt是一种字符串转数字的,下面这篇文章主要给大家介绍了关于Js中parseInt的使用及注意事项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具