zoukankan
html css js c++ java
用JavaScript绘图 ——JS2D函数集
代码如下:
<script Language="javascript"> /****************** JS2D函数集 ******************* 作者:neweroica 2003-3-28 CopyRight (C) 2003 在引用或转载时请保留此版权信息,谢谢!!! 本函数集可以单独存成一个js文件:"JS2D.js" ***************************************************/ /************* 画点 ************** x,y 点所在的屏幕坐标(像素) color 颜色(字符串值) size 大小(像素) **********************************/ 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>") } /************* 画直线 ************** x1,y1 起点所在的屏幕坐标(像素) x2,y2 终点所在的屏幕坐标(像素) color 颜色(字符串值) size 大小(像素) style 样式 =0 实线 =1 虚线 =2 虚实线 **********************************/ 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);//alert(dx) 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; } } } /************* 画实心矩形 ************** x1,y1 起点(矩形左上角)所在的屏幕坐标(像素) x2,y2 终点(矩形右下角)所在的屏幕坐标(像素) color 颜色(字符串值) **********************************/ 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>") } /************* 画矩形 ************** x1,y1 起点(矩形左上角)所在的屏幕坐标(像素) x2,y2 终点(矩形右下角)所在的屏幕坐标(像素) color 颜色(字符串值) size 大小(像素) style 样式 =0 实线 =1 虚线 =2 虚实线 **********************************/ 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); } /************* 画椭圆 ************** x,y 中心所在的屏幕坐标(像素) a,b 长轴和短轴的长度(像素) color 颜色(字符串值) size 大小(像素) precision 边缘精细度 **********************************/ 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); } } /************* 画多边形 ************** x,y 中心所在的屏幕坐标(像素) r 多边形外接圆半径(像素) n 多边形的边数 color 颜色(字符串值) size 大小(像素) style 样式 =0 实线 =1 虚线 =2 虚实线 **********************************/ 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;//alert(x1+" "+y1) } } </script> <script> //****************** JS2D函数集示例 ******************* 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>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
青苹果Web应用商店
https://webapp.taobao.com/
PHP/ASP.NET/ASP/UCHOME/DISCUZ! X系列网站开发,详细需求联系
QQ:8511978
查看全文
相关阅读:
14_部署LNMP环境、构建LNMP平台、地址重写
13_搭建Nginx服务器、配置网页认证、基于域名的虚拟主机、ssl虚拟主机
12_rsync+SSH同步
11_DNS子域授权、分离解析、缓存DNS服务器
10_自定义yum仓库、源码编译安装
09_parted分区工具、交换分区、链路聚合
08_简单MariaDB数据库的管理
bzoj1396
bzoj4154
bzoj3489
原文地址:https://www.cnblogs.com/Dicky/p/401009.html
最新文章
poj 2299 Ultra-QuickSort (归并排序 求逆序数)
poj 3253 Fence Repair (哈夫曼树 优先队列)
poj 2503 Babelfish (查找 map)
poj 1611 The Suspects(简单并查集)
poj 1035 Spell checker(水题)
poj 3080 Blue Jeans(水题 暴搜)
poj 3041 Asteroids (二分图的最大匹配 第一题)
poj 3267 The Cow Lexicon(dp)
poj 3687 Labeling Balls(拓扑排序)
[CTS2019]氪金手游
热门文章
AT5760 Manga Market
AT [ABC176F] Brave CHAIN
NOIP2017 Day2T3 列队
CF1399F Yet Another Segments Subset
「SDWC2018 Day1」网格
[JSOI2011]分特产
CF285E Positions in Permutations
17_安装部署Tomcat服务器、使用Tomcat部署虚拟主机、使用Varnish加速Web
16_构建memcached服务、LNMP+memcached、PHP的本地Session信息、PHP实现session共享
15_Nginx反向代理、Nginx的TCP/UDP调度器、Nginx常见问题处理
Copyright © 2011-2022 走看看