JS画图(非VML)--兼容IE/FF

更新时间：2006年12月06日 00:00:00 作者：

<!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需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS画图(非VML)--兼容IE/FF

一篇文章带你浅入webpack的DLL优化打包
这篇文章主要介绍了一篇文章带你浅入webpack的DLL优化打包,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
JavaScript实现拼音排序的方法
本文将介绍JavaScript如何实现拼音排序支持所有主流浏览器+中英文系统
2012-11-11
bcastr2.0 通用的图片浏览器
bcastr2.0 通用的图片浏览器...
2006-11-11
IE php关于强制下载文件的代码
这个东东，把我搞得晕晕乎乎的，FF下，没有强制下载文件这个问题。
2008-08-08
返回对象在当前级别中是第几个元素的实现代码
我就是想怎么获取每个层相对于父级层是第几个，需要的朋友可以参考下。
2011-01-01
JS日期格式化之javascript Date format
这篇文章主要介绍了JS日期格式化之javascript Date format的相关资料,需要的朋友可以参考下
2015-10-10
JavaScript中this绑定规则你理解了吗
JavaScript中的this是一个非常重要的概念，也是一个令新手开发者甚至有些不深入理解的多年经验开发者都会感到困惑的概念，如果你希望自己能够使用this编写更好的代码或者更好理解他人的代码，就跟随小编一起理解一下this吧
2023-07-07
模仿JQuery.extend函数扩展自己对象的js代码
最近打算写个自己的js工具集合，把自己平常经常使用的方法很好的封装起来，其中模仿了jq的结构。
2009-12-12
一个JavaScript用逗号分割字符串实例
分割字符串的方法有很多，这篇文章主要介绍了一个JavaScript用逗号分割字符串实例，需要的朋友可以参考下
2014-09-09
JavaScript实现非常简单实用的下拉菜单效果
这篇文章主要介绍了JavaScript实现非常简单实用的下拉菜单效果,通过定义显示及隐藏菜单项及鼠标事件调用该函数实现下拉菜单功能,需要的朋友可以参考下
2015-08-08

JS画图(非VML)--兼容IE/FF

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具