用JavaScript绘图 ——JS2D函数集

/****************** JS2D函数集 *******************

作者：neweroica 2003-3-28

CopyRight (C) 2003

在引用或转载时请保留此版权信息，谢谢!!!

本函数集可以单独存成一个js文件："JS2D.js"

***************************************************/

/************* 画点 **************
x,y 点所在的屏幕坐标（像素）
color 颜色（字符串值）
size 大小（像素）
**********************************/
function drawDot(x,y,color,size){
document.write("

")
}

/************* 画直线 **************
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)||((y2-y1)

")
}

/************* 画矩形 **************
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

//****************** 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);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • SeaJS 与 RequireJS 的差异对比

    SeaJS 与 RequireJS 的差异对比

    "历史不是过去,历史正在上演.随着 W3C 等规范.以及浏览器的飞速发展,前端的模块化开发会逐步成为基础设施.一切终究都会成为历史,未来会更好."--引用玉伯原文最后一段话,我个人也非常赞同.既然谈到了"未来",我个人认为:前端 js 模块如果继续发展,其模块格式很可能会成为未来 WEB 一种标准规范,产生多种实现方式.就好比 JSON 格式一样,最终成为标准.被浏览器原生实现. 谁更有能成为未来的异步模块标准?SeaJS 遵循 CMD 规范,RequireJS 遵

  • 一篇文章掌握RequireJS常用知识

    一篇文章掌握RequireJS常用知识

    本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结出在使用RequireJS过程中最常用的一些用法,并对文档中不够清晰具体的内容,加以例证和分析,分享给大家供大家参考,具体内容如下 1. 模块化 相信每个前端开发人员在刚开始接触js编程时,都写过类似下面这样风格的代码: <script type="text/javascript"> var a = 1; var b = 2; var c = a * a + b * b; if(c> 1)

  • 用js绘图

    <object id=DirectDraw classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" style="positiion:absolute;top:0;left:0;width:320;height:200" > <param name="line0001" value="绘图指令1"> <param name="line00

  • VML绘图板②脚本--VMLgraph.js、XMLtool.js

    脚本************** VMLgraph.js*************var xo=0;var yo=0;var ox=80;var oy=20;var dx=0;var dy=0;var drawKey = false;var itemID = 0;var ShapeItemNum = 0;var ShapeItemX = 0;var ShapeItemY = 0;var CurveItemNum = 0;var NodeDelete = false;var ToolBarNum

  • 纯JavaScript代码实现移动设备绘图解锁

    纯JavaScript代码实现移动设备绘图解锁

    移动手机设备上有一个屏幕解锁的应用相信大家都不陌生,在移动设备上,用户可以通过设置锁定图案作为密码对设备用户界面进行锁定,锁定界面如下图所示. 效果图如下所示 JavaScript Code <script> $("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控件颜色 roundRadii:50, //大圆点的

  • RequireJS简易绘图程序开发

    RequireJS简易绘图程序开发

    前言 RequireJS的出现让前端代码模块化变得容易,当前端项目越来越大,代码越来越多的时候,模块化代码让项目结构更清晰,不仅在开发时让我们的思路更清晰,而且后期维护起来也更容易.下面是我学习RequireJS后使用RequireJS开发的一款简易绘图程序,运行在浏览器中如下图所示: 如果你对RequireJS还不是很了解,可以看我的RequireJS学习笔记:http://blog.csdn.net/yubo_725/article/details/52913853 开始 这个简易绘图程序的

  • 探索angularjs+requirejs全面实现按需加载的套路

    在进行有一定规模的项目时,通常希望实现以下目标:1.支持复杂的页面逻辑(根据业务规则动态展现内容,例如:权限,数据状态等):2.坚持前后端分离的基本原则(不分离的时候,可以在后端用模版引擎直接生成好页面):3.页面加载时间短(业务逻辑复杂就需要引用第三方的库,但很可能加载的库和用户本次操作没关系):4,还要代码好维护(加入新的逻辑时,影响的文件尽量少). 想同时实现这些目标,就必须有一套按需加载的机制,页面上展现的内容和所有需要依赖的文件,都可以根据业务逻辑需要按需加载.最近都是基于angula

  • JavaScript 绘图代码

    JavaScript绘图 IE4 = ! (navigator.appVersion.charAt(0) ') } function Plot(x,y) { outPlot(x,y,1,1) if(Ox>=0 || Oy>=0) { ShowLine(Ox,Oy,x-Ox,y-Oy) } Ox = x Oy = y } function ShowLine(x,y,w,h) { if(w0) return 1 if(ndy) { temp = dx dx = dy dy = temp key =

  • 小心！AngularJS结合RequireJS做文件合并压缩的那些坑

    小心！AngularJS结合RequireJS做文件合并压缩的那些坑

    在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须跟main.js里面的保持一致. 这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件.在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的path

  • 用JavaScript绘图 ——JS2D函数集

    /****************** JS2D函数集 ******************* 作者:neweroica 2003-3-28 CopyRight (C) 2003 在引用或转载时请保留此版权信息,谢谢!!! 本函数集可以单独存成一个js文件:"JS2D.js" ***************************************************/ /************* 画点 ************** x,y 点所在的屏幕坐标(像素) col

  • JavaScript中获取时间的函数集

    下面给大家介绍下js获取时间的函数集. $(function(){ var mydate = new Date(); var t=mydate.toLocaleString(); $("#time").text(t); $("#time").load("Untitled-1.html"); }); 获取JavaScript 的时间使用内置的Date函数完成 var mydate = new Date(); mydate.getYear(); //

  • ASP.NET编程中经常用到的27个函数集

    ASP.Net是建立在微软新一代.Net平台架构上,利用普通语言运行时(Common Language Runtime)在服务器后端为用户提供建立强大的企业级Web应用服务的编程框架.下面列举了常用的27个ASP.NET中的函数集: 1.DateTime 数字型 复制代码 代码如下: System.DateTime currentTime=new System.DateTime(); 1.1 取当前年月日时分秒 currentTime=System.DateTime.Now; 1.2 取当前年

  • 收藏的ASP常用的函数集

    ASP函数集  '========取得带端口的URL,推荐使用================ Function Get_ScriptNameUrl()  If request.servervariables("SERVER_PORT")="80" Then   Get_ScriptNameUrl="http://" & request.servervariables("server_name")&lcase(

  • php 数组的合并、拆分、区别取值函数集

    合并数组有三个函数: 1.array_combine() 携带两个参数数组,参数数组一的值作新数组的键,参数数组二的值作新数组的值.很简单. 例子: 复制代码 代码如下: <?php $a = array('green', 'red', 'yellow'); $b = array('avocado', 'apple', 'banana'); $c = array_combine($a, $b); print_r($c); ?> 上例将输出: 复制代码 代码如下: Array ( [green]

  • 解析php常用image图像函数集

    gd_info函数:获取当前安装的GD库的信息 getimagesize函数:获取图像的大小 image_type_to_extension函数:获取图像类型的文件后缀 image_type_to_mime_type函数:判断一个IMAGETYPE常量的MIME类型 image2wbmp函数:以WBMP格式将图像输出到浏览器或文件 imagealphablending函数:设定图像的混色模式 imageantialias函数:是否使用antialias(抗锯齿)功能 imagearc函数:画椭圆

  • 详解plotly.js 绘图库入门使用教程

    详解plotly.js 绘图库入门使用教程

    本文介绍了plotly.js 绘图库入门使用教程,分享给大家,具体如下: Plotly 缘起 这两天想在前端展现数学函数图像,猜测应该有成熟的 js 库. 于是,简单的进行了尝试. 最后决定使用plotly.js,其他的比如function-plot 看起来也不错,以后有时间再看. Plotly plotly.jsis the open source JavaScript graphing library that powers Plotly. Plotly 可以称之为迄今最优秀的绘图库,没有之

  • javascript 词法作用域和闭包分析说明

    javascript 词法作用域和闭包分析说明

    复制代码 代码如下: var classA = function(){ this.prop1 = 1; } classA.prototype.func1 = function(){ var that = this, var1 = 2; function a(){ return function(){ alert(var1); alert(this.prop1); }.apply(that); }; a(); } var objA = new ClassA(); objA.func1(); 大家应

  • VB编程基础课教程

    VB编程基础课 什么是API API文本游览器  API函数声明 数据类型与"类型安全"  常 数 结 构  小 结 一些API函数集: 控件与消息函数.硬件与系统函数.菜单函数.绘图函数  什么是API   首先,有必要向大家讲一讲,什么是API.所谓API本来是为C和C++程序员写的.API说来说去,就是一种函数,他们包含在一个附加名为DLL的动态连接库文件中.用标准的定义来讲,API就是Windows的32位应用程序编程接口,是一系列很复杂的函数,消息和结构,它使编程人员可以用不

随机推荐