Javascript 绘图 例子

最新推荐文章于 2024-07-12 09:36:48 发布
最新推荐文章于 2024-07-12 09:36:48 发布
阅读量3.2k 收藏 3
点赞数
文章标签： javascript function border table class div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lenkou/article/details/2045725
版权

1。适用于ie，firefox等浏览器的解决方案<例子>： --index1.html

 

<html>
<head>
<script Language="javascript">
function drawDot(x,y,color,size)
{
  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>");
}
function drawLine(x1,y1,x2,y2,color,size,style)
{
  var i;
  var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));
  var theta=Math.atan((x2-x1)/(y2-y1));
  if(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0))
  {
   theta = Math.PI + theta;
  }
  var dx=Math.sin(theta);
  var dy=Math.cos(theta);
  for(i=0;i<r;i++){
    switch(style){
      case 0:
        drawDot(x1+i*dx,y1+i*dy,color,size);
        break;
      case 1:
        i+=size*2;
        drawDot(x1+i*dx,y1+i*dy,color,size);
        break;
      case 2:
        if(Math.floor(i/4/size)%2==0){
          drawDot(x1+i*dx,y1+i*dy,color,size);
        }
        else{
            i+=size*2;
            drawDot(x1+i*dx,y1+i*dy,color,size);
        }
        break;
      default:
        drawDot(x1+i*dx,y1+i*dy,color,size);
        break;
    }
  }
}

function drawFilledRect(x1,y1,x2,y2,color)
{
  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>");
}
function drawRect(x1,y1,x2,y2,color,size,style)
{
  drawLine(x1,y1,x2,y1,color,size,style);
  drawLine(x1,y2,x2,y2,color,size,style);
  drawLine(x1,y1,x1,y2,color,size,style);
  drawLine(x2,y1,x2,y2,color,size,style);
}
function drawOval(x,y,a,b,color,size,precision)
{
  var i;
  var iMax=2*Math.PI;
  var step=2*Math.PI/(precision*Math.sqrt(a*b)*4.5);
  for(i=0;i<iMax;i+=step)
  {
    drawDot(x+a*Math.cos(i),y+b*Math.sin(i),color,size);
  }
}
function drawPoly(x,y,r,n,color,size,style)
{
  var i;
  var theta=Math.PI;
  var x1=x,y1=y-r,x2,y2;
  for(i=0;i<n;i++)
  {
    theta-=(2*Math.PI/n);
    x2=x+r*Math.sin(theta);
    y2=y+r*Math.cos(theta);
    drawLine(x1,y1,x2,y2,color,size,style);
    x1=x2;
    y1=y2;
  }
}
</script>
</head>
<body>
<script Language="javascript">
drawLine(20,20,300,20,"#0000cc",2,0);
drawLine(20,40,300,40,"#0000cc",2,1);
drawLine(20,60,300,60,"#0000cc",2,2);
drawFilledRect(20,80,300,200,"009900");
drawRect(20,220,220,320,"ff0000",2,0);
drawRect(240,220,440,320,"ff0000",2,1);
drawRect(460,220,660,320,"ff0000",2,2);
drawOval(250,450,120,50,"006600",1,1);
drawOval(250,650,120,120,"006600",2,0.5);
drawPoly(200,900,100,3,"ff8800",2,0);
drawPoly(400,900,100,4,"ff8800",2,1);
drawPoly(600,900,100,5,"ff8800",2,2);
drawPoly(200,1100,100,6,"ff8800",2,0);
drawPoly(400,1100,100,7,"ff8800",2,1);
drawPoly(600,1100,100,12,"ff8800",2,2);
</script>
</body>
</html> 

2。利用vml的绘图<例子>，适用于ie --index2.html

 


  <html   xmlns:v="urn:schemas-microsoft-com:vml">  
  <META   content="text/html;   charset=gb2312"   http-equiv=content-type>  
  <SCRIPT   LANGUAGE=javascript>  
  <!--  
  var   Ox="";
  var   Oy="";
  var   LongCase=250;  
  var   LongX=250;
  var   LongY=250;//mondify  
  var   caseX=25;//
  var   caseY=25;// 
  var   ArrayX=new   Array();  
  var   ArrayY=new   Array();  
  ArrayX[0]=0;  
  ArrayY[0]=0;  
   
  ArrayX[1]=33;  
  ArrayY[1]=33;  
   
  ArrayX[2]=40;  
  ArrayY[2]=20;  
   
  ArrayX[3]=50;  
  ArrayY[3]=40;  
   
  ArrayX[4]=60;  
  ArrayY[4]=10;  
   
  ArrayX[5]=65;  
  ArrayY[5]=20;  
   
  ArrayX[6]=80;  
  ArrayY[6]=80;  
   
  ArrayX[7]=85;  
  ArrayY[7]=85;  
   
  ArrayX[8]=99;  
  ArrayY[8]=99;  
  function   mouse()  
  {  
  window.status=event.y+","+event.x     ;  
  }  
  function   mousex()  
  {  
  alert(window.event.offsetY);  
  }  
  function   sColor(TakeMode)  
  {  
  var   sel=window.showModalDialog("selcolor.html",   "",   "dialogWidth:18.5em;   dialogHeight:17.5em;   status:0");  
   
  if   (sel!=null)  
  {  
  //alert(sel);  
  for   (var   i=0;i<document.all(TakeMode).length;i++)  
  {  
  document.all(TakeMode)[i].strokecolor=sel;  
  }  
  }  
  }  
  //-->  
  </SCRIPT>  
      <head>  
      <object   id='VMLRender'   classid='CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E'></object>  
       
        <style>  
              v/:*   {   behavior:   url(#VMLRender);   }  
           
          .Scale{font-family   :   Comic   Sans   Ms;font-size   :   9pt;font-weight   :   bold;color:white;}  
            .Scale2{font-family   :   Comic   Sans   Ms;font-size   :   7pt;font-weight   :   bold;color:white;}  
          </style>  
                <SCRIPT   ID=clientEventHandlersJS   LANGUAGE=javascript>  
  <!--  
   
  function   document_oncontextmenu()   {  
  window.event.returnValue=0;  
  }  
   
  //-->  
  </SCRIPT>  
   
  <SCRIPT   LANGUAGE=javascript   FOR=document   EVENT=oncontextmenu>  
  <!--  
    document_oncontextmenu()  
  //-->  
  </SCRIPT>  
  </head>  
      <body   οnmοusemοve=mouse()     bgcolor=Black>  
  <table   style="position:absolute;top:0pt;left:0pt;HEIGHT:330pt;WIDTH:310pt;"   >  
  <tr><td></td></tr></table>  
  <!--<TEXTAREA   rows=40   cols=40   id=textarea1   name=textarea1>   background="main.bmp"  
  25,45</TEXTAREA>-->  
  <SCRIPT   LANGUAGE=javascript>  
  <!--  
  var   DocumentX="";  
  for   (var   nowX=caseX;nowX<LongX;nowX=nowX+caseX)//mondify  
  {  
  DocumentX=DocumentX+"<v:line   id=Firds   name=Firds   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;'   from="+nowX+"pt,0pt     to="+nowX+"pt,"+LongY+"pt   strokecolor=#696969     strokeweight=1pt></v:line>";  
  }  
  for   (var   nowY=caseY;nowY<LongY;nowY=nowY+caseY)  
  {  
  DocumentX=DocumentX+"<v:line   id=Firds   name=Firds   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;'   from=0pt,"+nowY+"pt     to="+LongX+"pt,"+nowY+"pt   strokecolor=#696969   strokeweight=1pt></v:line>";  
  }  
  //textarea1.value=DocumentX;  
  document.write(DocumentX);  
  document.write("<v:line   id=FirdsY   name=FirdsY   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;'   from=0pt,-10pt     to=0pt,"+LongCase+"pt   strokecolor=white   strokeweight=0.5pt></v:line>");  
  document.write("<v:line   id=FirdsX   name=FirdsX   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;'   from=0pt,"+LongCase+"pt     to="+(LongCase+30)+"pt,"+LongCase+"pt   strokecolor=white   strokeweight=0.5pt></v:line>");  
  document.write   ("<v:polyline   style=position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt   points   ='0pt,-10pt   0,-20pt   3pt,-10pt'   fillcolor   =white   strokecolor=white   strokeweight   =0pt></v:polyline>");  
  document.write   ("<v:polyline   style=position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt   points   ='280pt,250pt   270pt,250pt   270pt,247pt'   fillcolor   =white   strokecolor=white   strokeweight   =0pt></v:polyline>");  
   
  var   bnTd=0;  
  for   (var   tdX=100;tdX>=0;tdX=tdX-1)  
  {  
  bnTd=bnTd+1;  
  if   (Math.ceil(tdX/2)*2==Math.ceil(tdX))  
  {  
  if   (Math.ceil(Math.ceil(tdX/5)*5)==Math.ceil(tdX))  
  {  
  document.write("<div   align=right   class=Scale   style='position:absolute;left:0pt;top:"+Math.ceil(Math.ceil(tdX*(250/100))+45)+"pt;width:45pt'>");  
  document.write   (100-tdX);  
  document.write   ("&nbsp;</div>");  
  document.write("<v:line   id=tdX   name=tdX   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;z-index:2'   from=0pt,"+tdX*(250/100)+"pt     to=10pt,"+tdX*(250/100)+"pt   strokecolor=white   strokeweight=0.25pt></v:line>");  
  }  
  else  
  document.write("<v:line   id=tdX   name=tdX   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;z-index:2'   from=0pt,"+tdX*(250/100)+"pt     to=5pt,"+tdX*(250/100)+"pt   strokecolor=white   strokeweight=0.25pt></v:line>");  
   
  }  
  else  
  {  
  if   (Math.ceil(Math.ceil(tdX/5)*5)==Math.ceil(tdX))  
  {  
  document.write("<v:line   id=tdX   name=tdX   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;z-index:2'   from=0pt,"+tdX*(250/100)+"pt     to=10pt,"+tdX*(250/100)+"pt   strokecolor=white   strokeweight=0.25pt></v:line>");  
  }  
  else  
  {  
  document.write("<v:line   id=tdX   name=tdX   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;z-index:2'   from=0pt,"+tdX*(250/100)+"pt     to=3pt,"+tdX*(250/100)+"pt   strokecolor=white   strokeweight=0.25pt></v:line>");  
  }  
  }  
  }  
  bnTd=0;  
  for   (var   tdY=100;tdY>=0;tdY=tdY-1)  
  {  
  bnTd=bnTd+1;  
  if (Math.ceil(tdY/2)*2==Math.ceil(tdY))  
  {  
   if (Math.ceil(Math.ceil(tdY/5)*5)==Math.ceil(tdY))  
   {  
    if (tdY!=0)  
    {  
    document.write("<div   align=right   class=Scale   style='position:absolute;left:"+Math.ceil(Math.ceil(tdY*(LongCase/100))+10)+"pt;top:"+(LongCase+55)+"pt;width:45pt'>");  
    document.write   (tdY);  
    document.write   ("&nbsp;</div>");  
    document.write("<v:line   id=tdY   name=tdY   style='position:absolute;top:"+(LongCase+40)+"pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;z-index:2'   from="+tdY*(LongCase/100)+"pt,0pt     to="+tdY*(LongCase/100)+"pt,10pt   strokecolor=white   strokeweight=0.25pt></v:line>");  
    }  
   }  
   else
   {
    document.write("<v:line   id=tdY   name=tdY   style='position:absolute;top:"+(LongCase+45)+"pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;z-index:2'   from="+tdY*(LongCase/100)+"pt,0pt     to="+tdY*(LongCase/100)+"pt,5pt   strokecolor=white   strokeweight=0.25pt></v:line>");  
   }
   
  }  
  else  
  {  
   if(Math.ceil(Math.ceil(tdY/5)*5)==Math.ceil(tdY))  
   {  
   document.write("<v:line   id=tdY   name=tdY   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;z-index:2'   from="+tdY*(250/100)+"pt,250pt     to="+tdY*(250/100)+"pt,"+(250-10)+"pt   strokecolor=white   strokeweight=0.25pt></v:line>");  
   }  
   else  
   {  
   document.write("<v:line   id=tdY   name=tdY   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;z-index:2'   from="+tdY*(250/100)+"pt,250pt     to="+tdY*(250/100)+"pt,"+(250-3)+"pt   strokecolor=white   strokeweight=0.25pt></v:line>");  
   }  
  }  
  }  
   
  //drawLine  
  function   drawLine(LineX1,LineY1,LineX2,LineY2)  
  {  
   //translate   X.  
   var   sarX1=250*LineX1/100;  
   var   sarX2=250*LineX2/100;  
   //translate   Y.  
   var   sarY1=(100-LineY1)*250/100;  
   var   sarY2=(100-LineY2)*250/100;  
   //draw   Line.  
   document.write("<v:line   id=line   name=line   style='position:absolute;top:50pt;left:45pt;HEIGHT:200pt;WIDTH:200pt;z-index:5'   from="+sarX1+"pt,"+sarY1+"pt     to="+sarX2+"pt,"+sarY2+"pt   strokecolor=#ffd700   strokeweight=0.25pt></v:line>");  
  }  
   
  //drawLine  
   
  var   tempX=0;  
  var   tempY=0;  
   
  function   beginDraw()  
  {  
   
   for(var   i=0;i<=ArrayX.length-1;i++)  
   {  
  
    if   (i==0)  
    {  
     tempX=ArrayX[0];  
     tempY=ArrayY[0];  
    }  
    else  
    {  
     tempX=ArrayX[i-1];  
     tempY=ArrayY[i-1];  
     drawLine(tempX,tempY,ArrayX[i],ArrayY[i])  
    }  
   }  
   
  }  
  beginDraw();  
  //-->  
  </SCRIPT>  
  <div   style="   BORDER-BOTTOM:  buttonshadow   1px solid;  
                           BORDER-LEFT:  buttonhighlight   1px solid;  
                           BORDER-RIGHT: buttonshadow   1px solid;  
                           BORDER-TOP: buttonhighlight   1px solid;
                           position: absolute;BORDER-LEFT-COLOR:oldlace;  
                           BORDER-TOP-COLOR:  oldlace;position:absolute;
                           top:310pt;left:15pt;z-index:3">  
   
  <div  style="position:absolute;top:18pt;left:0pt;z-index:4;"  class=Scale2   align=right> </div>   
  </body>  
  </html>

lenkou
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript经典特效---JavaScript绘图.rar
12-25
JavaScript绘图技术是Web开发中的一个重要领域，它允许开发者在网页上动态创建和修改图形，为用户带来丰富的视觉...通过学习和实践这些例子，开发者可以提升自己的JavaScript绘图能力，创造出更具吸引力的网页应用。
javascript例子javascript例子
08-19
这个"javascript例子javascript例子"的压缩包很可能包含了一系列用于教学或示例的JavaScript代码片段，总计320个。这些例子可能是为了帮助初学者理解和掌握JavaScript的核心概念和常见用法。 在JavaScript中，你...
每天一个JavaScript实例-canvas画图
wxyoo1 的技术人生
11-03 1005
每天一个JavaScript实例-canvas画图 .canvas{ width:600px; height:500px; } window.onload = function(){ var imgcanvas = document.getElementById("imgcanvas"); if(imgcanvas.getContext){ var ctx = imgc
用javascript绘图 ——JS2D函数集
wyyl1的专栏
05-16 924
转自：http://www.esnet.com.cn/Article/jishu/dw/200703/12786.html用JavaScript绘图 ——JS2D函数集 /****************** JS2D函数集 ******************* 作者：neweroica 2003-3-28 CopyRight (C) 2003 在引用或转载时请保留此版权信息，谢谢
canvas画图小例子
笨笨的码农的博客
06-30 1183
<!DOCTYPE html> <html lang="en"> <head> <title>画图</title> <meta charset="utf-8"> </head> <body> <div id="con" style="width:500px;height:450px;border:...
Javascript：利用JS在空白网页中绘制简单图形
KaiSarH
12-19 466
利用JS在空白网页中绘制简单图形
用于图形绘制的Javascript库jsDraw2D发布
iteye_7237的博客
05-19 244
近日，jsFiction公司发布了 jsDraw2D，这款Javascript库使得开发者能够更加容易地创建图形，包括基本形状（如多边形，弧形，圆），填充形状，以及贝塞尔曲线（包括一次，二次和立体曲线）。开发者可以在div元素中改变坐标系统的原点到任意点上，并且可以选择缺省或者笛卡尔坐标系统。 jsDraw2D还可以允许你设置图形的大小比例。 jsDraw2D 结合了为数不多的产品，这些产品...
arcgis 绘图及显示图形例子
金石软件
06-12 955
arcgis 绘图及显示图形例子
JavaScript笔记：使用canvas绘图
YuqiRealm.com
09-30 932
JavaScript笔记：使用canvas绘图 基本用法 2D上下文 WebGL
javascript实用例子文件
10-07
这个"javascript实用例子文件"的压缩包很可能包含了各种实际应用中的JavaScript代码示例，可以帮助学习者更好地理解和掌握JavaScript的核心概念及实践技巧。 首先，我们来看一下JavaScript的基本特性。JavaScript是...
JS 绘图组件mxgraphAPI和例子demo
10-18
亲手做的例子demo，希望能帮助到大家； mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流 程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用 javascript 写的前端程序,...
JavaScript绘图，在页面上绘制圆状图形，供源码下载
03-28
这篇博文“JavaScript绘图，在页面上绘制圆状图形”提供了一个源码示例，我们可以从中学习到如何利用JavaScript和HTML5 Canvas API来创建动态的、交互式的圆形。 首先，我们需要在HTML文件中引入一个canvas元素。在...
原生js实现画图
a15976447851的博客
09-14 2543
原生js实现画图 可以用来做你画我猜小游戏的前半部分。 首先写出canvas属性 &lt;canvas id="canvas" width="400" height="400"&gt; canvas &lt;/canvas&gt; 然后给body和canvas属性 突出canvas的范围 &lt;style&gt; body{ width: 100%; ..
Webkit简介以及工作流程
读心悦
07-10 310
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
最新发布
cc1314_工作、学习有感
07-12 187
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 307
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 163
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1273
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
JavaScript画图
11-23
以下是一个JavaScript画图的例子： ```html <!DOCTYPE html> <title>Canvas Demo <canvas id="myCanvas" width="500" height="500"></canvas> var canvas = document.getElementById("myCanvas"); var ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值