动态网站制作指南
[  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
电脑书籍下载:程序设计书籍 | 数据库教程书籍 | 平面与多媒体书籍 | 网络通讯书籍 | 系统管理书籍 | 网络安全书籍 | 认证考试书籍
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > Javascript教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ Javascript教程 ]的信息

本月文章推荐
.JavaScript极速狂飙:大容量字符.
.如何用javascript防止连打(双击.
.JavaScript极速狂飙:CSS样式表的.
.javascript实现划词标记划词搜索.
.利用搜索引擎引用来高亮页面关键.
.开发跨浏览器JavaScript时要注意.
.javascript表单之间的数据传递.
.利用JavaScript制作倒计时牌.
.Javascript实例教程(20) OLE Aut.
.用javascript 转换外部链接样式.
.TreeView节点互斥,autopostback=.
.经典正则表达式 (收藏整理).
.Javascript实例教程(19) 使用HoT.
.用JavaScrpt实现文件夹轻松加密.
.JavaScript模拟ACDSEE简单功能.
.Javascript设计网页中的下拉菜单.
.用JavaScript刷新框架子页面的方.
.关于ie的内存泄漏与javascript内.
.Javascript模拟游戏中的弹出菜单.
.Javascript实例教程(20) OLE Aut.

用JavaScript绘图—JS2D函数集

文章类别:Javascript教程 | 发表日期:2005-12-8 |


<script Language="javascript"><br />
/****************** JS2D函数集  *******************<br />
<br />
  作者:neweroica    2003-3-28<br />
<br />
  CopyRight (C) 2003<br />
<br />
  在引用或转载时请保留此版权信息,谢谢!!!<br />
<br />
  本函数集可以单独存成一个js文件:"JS2D.js"<br />
<br />
***************************************************/<br />
<br />
/************* 画点 **************<br />
  x,y     点所在的屏幕坐标(像素)<br />
  color   颜色(字符串值)<br />
  size    大小(像素)<br />
**********************************/<br />
function drawDot(x,y,color,size){<br />
  document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></td></tr></table>")<br />
}<br />
<br />
/************* 画直线 **************<br />
  x1,y1   起点所在的屏幕坐标(像素)<br />
  x2,y2   终点所在的屏幕坐标(像素)<br />
  color   颜色(字符串值)<br />
  size    大小(像素)<br />
  style   样式<br />
          =0    实线<br />
          =1    虚线<br />
          =2    虚实线<br />
**********************************/<br />
function drawLine(x1,y1,x2,y2,color,size,style){<br />
  var i;<br />
  var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));<br />
  var theta=Math.atan((x2-x1)/(y2-y1));<br />
  if(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0))<br />
    theta=Math.PI+theta;<br />
  var dx=Math.sin(theta);//alert(dx)<br />
  var dy=Math.cos(theta);<br />
  for(i=0;i<r;i++){<br />
    switch(style){<br />
      case 0:<br />
        drawDot(x1+i*dx,y1+i*dy,color,size);<br />
        break;<br />
      case 1:<br />
        i+=size*2;<br />
        drawDot(x1+i*dx,y1+i*dy,color,size);<br />
        break;<br />
      case 2:<br />
        if(Math.floor(i/4/size)%2==0){<br />
          drawDot(x1+i*dx,y1+i*dy,color,size);<br />
        }<br />
        else{<br />
            i+=size*2;<br />
            drawDot(x1+i*dx,y1+i*dy,color,size);<br />
        }<br />
        break;<br />
      default:<br />
        drawDot(x1+i*dx,y1+i*dy,color,size);<br />
        break;<br />
    }<br />
  }<br />
}<br />
<br />
/************* 画实心矩形 **************<br />
  x1,y1   起点(矩形左上角)所在的屏幕坐标(像素)<br />
  x2,y2   终点(矩形右下角)所在的屏幕坐标(像素)<br />
  color   颜色(字符串值)<br />
**********************************/<br />
function drawFilledRect(x1,y1,x2,y2,color){<br />
  document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x1)+"; top: "+(y1)+";background-color: "+color+"' width="+(x2-x1)+" height="+(y2-y1)+"></td></tr></table>")<br />
}<br />
<br />
/************* 画矩形 **************<br />
  x1,y1   起点(矩形左上角)所在的屏幕坐标(像素)<br />
  x2,y2   终点(矩形右下角)所在的屏幕坐标(像素)<br />
  color   颜色(字符串值)<br />
  size    大小(像素)<br />
  style   样式<br />
          =0    实线<br />
          =1    虚线<br />
          =2    虚实线<br />
**********************************/<br />
function drawRect(x1,y1,x2,y2,color,size,style){<br />
  drawLine(x1,y1,x2,y1,color,size,style);<br />
  drawLine(x1,y2,x2,y2,color,size,style);<br />
  drawLine(x1,y1,x1,y2,color,size,style);<br />
  drawLine(x2,y1,x2,y2,color,size,style);<br />
}<br />
<br />
/************* 画椭圆 **************<br />
  x,y         中心所在的屏幕坐标(像素)<br />
  a,b         长轴和短轴的长度(像素)<br />
  color       颜色(字符串值)<br />
  size        大小(像素)<br />
  precision   边缘精细度<br />
**********************************/<br />
function drawOval(x,y,a,b,color,size,precision){<br />
  var i;<br />
  var iMax=2*Math.PI;<br />
  var step=2*Math.PI/(precision*Math.sqrt(a*b)*4.5);<br />
  for(i=0;i<iMax;i+=step){<br />
    drawDot(x+a*Math.cos(i),y+b*Math.sin(i),color,size);<br />
  }<br />
}<br />
<br />
/************* 画多边形 **************<br />
  x,y     中心所在的屏幕坐标(像素)<br />
  r       多边形外接圆半径(像素)<br />
  n       多边形的边数<br />
  color   颜色(字符串值)<br />
  size    大小(像素)<br />
  style   样式<br />
          =0    实线<br />
          =1    虚线<br />
          =2    虚实线<br />
**********************************/<br />
function drawPoly(x,y,r,n,color,size,style){<br />
  var i;<br />
  var theta=Math.PI;<br />
  var x1=x,y1=y-r,x2,y2;<br />
  for(i=0;i<n;i++){<br />
    theta-=(2*Math.PI/n);<br />
    x2=x+r*Math.sin(theta);<br />
    y2=y+r*Math.cos(theta);<br />
    drawLine(x1,y1,x2,y2,color,size,style);<br />
    x1=x2;<br />
    y1=y2;//alert(x1+" "+y1)<br />
  }<br />
}<br />
</script><br />
<br />
<br />
<script><br />
//****************** JS2D函数集示例  *******************<br />
drawLine(20,20,300,20,"#0000cc",2,0);<br />
drawLine(20,40,300,40,"#0000cc",2,1);<br />
drawLine(20,60,300,60,"#0000cc",2,2);<br />
drawFilledRect(20,80,300,200,"009900");<br />
drawRect(20,220,220,320,"ff0000",2,0);<br />
drawRect(240,220,440,320,"ff0000",2,1);<br />
drawRect(460,220,660,320,"ff0000",2,2);<br />
drawOval(250,450,120,50,"006600",1,1);<br />
drawOval(250,650,120,120,"006600",2,0.5);<br />
drawPoly(200,900,100,3,"ff8800",2,0);<br />
drawPoly(400,900,100,4,"ff8800",2,1);<br />
drawPoly(600,900,100,5,"ff8800",2,2);<br />
drawPoly(200,1100,100,6,"ff8800",2,0);<br />
drawPoly(400,1100,100,7,"ff8800",2,1);<br />
drawPoly(600,1100,100,12,"ff8800",2,2);<br />
</script>

上一篇:提高代码性能技巧谈—以创建千行表格为例 人气:13100
下一篇:JavaScript极速狂飙:CSS样式表的渲染效率 人气:10730
点击此处浏览全部JavaScript的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-5-16 乘风多用户PHP统计系统 v3.4
2008-5-16 轩溪下载系统 v3.78 build 0515
2008-5-16 普沙B2B 浙江省商贸网 v2.0
2008-5-16 asp抓蜘蛛的小程序 v1.0
2008-5-16 齐齐乐网私服发布站 仿haosf新版
2008-5-16 IssTech信息反馈系统 v1.0
2008-5-16 自由领域大头贴(js接口版) 修正版
2008-5-16 医院网站系统
2008-5-16 智拓-分类信息管理系统 v5.0
2008-5-7 Windows XP SP3 官方英文版
2008-5-7 Windows XP SP3 官方香港中文版
2008-5-7 Windows XP SP3 官方繁体中文版
2008-5-7 Windows XP SP3 官方简体中文版
2008-4-30 Multiple Unzip Wizard 1.02
2008-4-30 Multiple Unrar Wizard 1.0.0
2008-4-30 WinZip Install/Try/Uninstall a
2008-4-30 ZIP压缩文件修复器WzipFix 2.0
2008-4-30 Pentazip 6.01 Build 189 For Wi
  发表评论
姓 名: 验证码: [ 全部贴吧 ] [ 浏览评论 ]
内 容:
[ 汉字翻译拼音 ] [ 广告代码 ] [ 符号对照表 ] [ 进制转换 ] [ 经典小工具 ] [ 个税计算 ] [ 汉字简繁转换 ] [ 普通单位换算 ] [ 公制单位换算 ]
[ 生辰老黄历 ] [ 国内电话区号 ] [ 国家代码与域名缩写 ] [ 文字加密解密 ] [ 健康查询 ] [ 万年历 ] [ 手机号码查询 ] [ ip搜索 ] [ Google PR查询 ]
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報