用JavaScript绘图—JS2D函数集

赵保乡郭凹村

赵保乡郭凹村

2016-02-19 14:40

今天图老师小编要向大家分享个用JavaScript绘图—JS2D函数集教程,过程简单易学,相信聪明的你一定能轻松get!
script Language="javascript"br /
/****************** JS2D函数集  *******************br /
br /
  作者:neweroica    2003-3-28br /
br /
  CopyRight (C) 2003br /
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=0trtd 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;ir;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 /
 &nbs

/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;iiMax;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;in;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 /
/scriptbr /
br /
br /
scriptbr /
//****************** 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

展开更多 50%)
分享

猜你喜欢

用JavaScript绘图—JS2D函数集

Web开发
用JavaScript绘图—JS2D函数集

用JavaScript绘图 ——JS2D函数集

Web开发
用JavaScript绘图 ——JS2D函数集

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用javascript绘图—JS2D函数集

电脑网络
用javascript绘图—JS2D函数集

用js绘图

Java JAVA基础
用js绘图

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

javascript延时重复执行函数 lLoopRun.js

Web开发
javascript延时重复执行函数 lLoopRun.js

API之绘图函数

编程语言 网络编程
API之绘图函数

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

C#基础学习——异步编程篇(一)

C#基础学习——异步编程篇(一)

用JavaScript 制作多彩的弹出式说明窗口

用JavaScript 制作多彩的弹出式说明窗口
下拉加载更多内容 ↓