liss
- 浏览: 842294 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (530)
- Java编程 (64)
- C/C++/D (6)
- .Net/C# (9)
- Ruby (12)
- JavaScript (77)
- XML (1)
- JSON (1)
- Ajax (17)
- ExtJs (81)
- YUI (1)
- JQuery (7)
- DWR (1)
- HTML (7)
- CSS (7)
- Database (6)
- PowerDesigner (23)
- DB2 (2)
- Oracle (57)
- MS SQL Server (8)
- MySQL (6)
- JSP/Servlet/JSTL/TagLib (3)
- Spring (1)
- Hibernate (0)
- iText (0)
- Struts (0)
- Struts2 (0)
- iReport (0)
- FreeMarker (0)
- HttpClient (1)
- POI (6)
- FckEditor (15)
- Eclipse / MyEclipse (10)
- IntelliJ IDEA (0)
- NetBeans (0)
- Tomcat (11)
- WebLogic (1)
- Jboss (3)
- jetty (4)
- IIS (2)
- CVS/VSS (1)
- FTP (1)
- Windows/DOS (6)
- Linux/Unix (0)
- 软件建模 UML (0)
- Design Pattern & Thinking In Programming (10)
- 数据结构与算法 (12)
- 软件项目管理 (9)
- 行业应用解决方案 (3)
- 电脑软件与故障解决 (13)
- 编程语言 (1)
- 十万个为什么 (3)
- JBPM (2)
- sysbase (2)
- JDBC (8)
- Ant (2)
- Case-计算机辅助软件工程 (1)
- WebService (4)
- 浏览器 (1)
最新评论
-
gaoqiangjava：
同一楼，还请大手帮解决
JAVA读取word文件 -
hyl523：
// 判断数组中的第一个值是否未定义，如果未定义，便定义为空对 ...
javascript面向对象之二 命名空间 -
ping12132200：
ping12132200 写道我抱着个错不是因为：body标签 ...
extjs在IE报对象不支持此属性或方法 -
ping12132200：
我抱着个错不是因为：body标签内的第一个元素不能为文本tex ...
extjs在IE报对象不支持此属性或方法 -
fireinjava：
呀，不错，转走了,谢谢啦~
利用OpenOffice将word转换成PDF
jsgraphics图形库基本函数说明
设置画笔颜色
setColor("#hexcolor");
示例：
jg.setColor("#ff0000");
或
jg.setColor("red");
如果没有设置画笔颜色，则默认用黑色来画。
参数缺少时会出错。参数为非颜色值时也会出错（防错这一块，该库做得不是非常完善）。
设置画笔宽度
setStroke(number);
示例：
jg.setStroke(3);
或
jg.setStroke(Stroke.DOTTED); //点线
如果没有设置画笔宽度，默认是1点宽。宽度是指从一边到另一边的点数，设为3，就是准准的3点
，而不是5点。stroke.dotted为虚线，线的宽度为1。stroke.dotted也可以用-1来代替，其它负
值时，都是1点实线。
画线
drawLine(x1, y1, x2, y2);
示例：
jg.drawLine(20, 50, 453, 40);
如果后面的一个点坐标没有提供，不会出错，但结果不一定正确，只能设点模式为stroke.dotted
时，相当于画一个点，而其它的，则会跑到y轴上。
画折线
drawPolyLine(xpoints, ypoints);
示例：
var xpoints = new Array(10, 85, 93, 60);
var ypoints = new Array(50, 10, 105, 87);
jg.drawPolyLine(xpoints, ypoints);
如果x坐标与y坐标数量不匹配，不会出错，但不匹配的点画不出线，只画出杂乱的点。
画框
drawRect(x, y, width, height);
示例：
jg.drawRect(20, 50, 70, 140);
实际宽度是width+pixel，而不是width+2*pixel。中间空白的宽度是width-pixel。顶点不管线宽
，总是(x, y)。
后面宽度与高度缺少，画出几个杂乱的点。
填充区域
fillRect(x, y, width, height);
示例：
jg.fillRect(20, 50, 453, 40);
与drawrect不同，实际宽度就是width。
以下画出两种颜色的框，中间还带一像素的背景色。
jg.setStroke(3);
jg.drawRect(20, 50, 70, 140);
jg.setColor("blue");
jg.fillRect(24, 54, 65, 135);
画任意多边形（封闭折线）
drawPolygon(xpoints, ypoints);
示例：
var xpoints = new Array(10, 85, 93, 20);
var ypoints = new Array(50, 10, 105, 87);
jg.drawPolygon(xpoints, ypoints);
如果参数中最后一个点不匹配，则画出折线，而不封闭。
填充任意多边形
fillPolygon(xpoints, ypoints);
示例：
jg.fillPolygon(new array(20, 85, 93, 40), new array(50, 50, 15, 87));
不错，这都能正确地填充好。
画椭圆
drawEllipse(x, y, width, height);
示例：
jg.drawEllipse(20, 50, 70, 140);
或
jg.drawOval(20, 50, 70, 140);
要画圆，则是宽与高一样就行。
填充椭圆
fillEllipse(x, y, width, height);
示例：
jg.fillEllipse(20, 50, 71, 141);
或
jg.fillOval(20, 50, 71, 141);
画弧
fillArc(x, y, width, height, start-angle, end-angle);
示例：
jg.fillArc(20, 20, 41, 12, 270.0, 220.0);
总是从前面的角度顺时针转到后面的角度，即使前面的角度大于后面的角度
设置字体
setFont("font-family", "size+unit", style);
输出文字
drawString("text", x, y);
示例：
jg.setFont("arial", "15px", Font.ITALIC_BOLD);
jg.drawString("some text", 20, 50);
字体样式有以下几种值：plain、bold、italic、italic_bold、bold_italic
固定区域输出文字
drawStringRect("text", x, y, width, alignment);
示例：
jg.setFont("verdana", "11px", font.bold);
jg.drawStringRect("text", 20, 50, 300, "right");
alignment的内容就是css中text-align的内容：left、right、center、justify
输出图像文件
drawImage("src", x, y, width, height);
示例：
jg.drawImage("dog.jpg", 20, 50, 100, 150);
如果有宽度与高度，就会把图像拉长或压缩，如果没有，则显示图像的原大。
画的结果显示出来
paint();
示例：
jg.paint();
以上的画图代码，直到这个语句时才显示出来。
清除画板
clear();
示例：
jg.clear();
设为可打印的
setprintable(true);
示例：
jg.setprintable(true);
如果没有设置可打印，则画出来的图像打印不出来。设为true后，paint出来的图才能打印出来。
如果设为false，则这部分paint的就不能打印了。而文字与图像不管如何设置，都可以打印出来
。
示例的html文件
<html>
<head>
<title>test</title>
<script language="javascript" src="wz_jsgraphics.js" type="text/javascript"></script>
</head>
<body>
<input id="butdraw" value="draw" type="button" onclick="butdraw_click();" />
<div id="test" style="color:blue; left: 0px; overflow: visible; width: 400px; position: relative; top: 0px; height: 250px;background:#eeeeee; "></div>
<script type="text/javascript">
var jg=new jsGraphics("test");
function butdraw_click()
{
if (window.event) event.cancelbubble = true;
jg.setColor("#ff00ff");
jg.setStroke(1);
jg.setPrintable(false);
设置画笔颜色
setColor("#hexcolor");
示例：
jg.setColor("#ff0000");
或
jg.setColor("red");
如果没有设置画笔颜色，则默认用黑色来画。
参数缺少时会出错。参数为非颜色值时也会出错（防错这一块，该库做得不是非常完善）。
设置画笔宽度
setStroke(number);
示例：
jg.setStroke(3);
或
jg.setStroke(Stroke.DOTTED); //点线
如果没有设置画笔宽度，默认是1点宽。宽度是指从一边到另一边的点数，设为3，就是准准的3点
，而不是5点。stroke.dotted为虚线，线的宽度为1。stroke.dotted也可以用-1来代替，其它负
值时，都是1点实线。
画线
drawLine(x1, y1, x2, y2);
示例：
jg.drawLine(20, 50, 453, 40);
如果后面的一个点坐标没有提供，不会出错，但结果不一定正确，只能设点模式为stroke.dotted
时，相当于画一个点，而其它的，则会跑到y轴上。
画折线
drawPolyLine(xpoints, ypoints);
示例：
var xpoints = new Array(10, 85, 93, 60);
var ypoints = new Array(50, 10, 105, 87);
jg.drawPolyLine(xpoints, ypoints);
如果x坐标与y坐标数量不匹配，不会出错，但不匹配的点画不出线，只画出杂乱的点。
画框
drawRect(x, y, width, height);
示例：
jg.drawRect(20, 50, 70, 140);
实际宽度是width+pixel，而不是width+2*pixel。中间空白的宽度是width-pixel。顶点不管线宽
，总是(x, y)。
后面宽度与高度缺少，画出几个杂乱的点。
填充区域
fillRect(x, y, width, height);
示例：
jg.fillRect(20, 50, 453, 40);
与drawrect不同，实际宽度就是width。
以下画出两种颜色的框，中间还带一像素的背景色。
jg.setStroke(3);
jg.drawRect(20, 50, 70, 140);
jg.setColor("blue");
jg.fillRect(24, 54, 65, 135);
画任意多边形（封闭折线）
drawPolygon(xpoints, ypoints);
示例：
var xpoints = new Array(10, 85, 93, 20);
var ypoints = new Array(50, 10, 105, 87);
jg.drawPolygon(xpoints, ypoints);
如果参数中最后一个点不匹配，则画出折线，而不封闭。
填充任意多边形
fillPolygon(xpoints, ypoints);
示例：
jg.fillPolygon(new array(20, 85, 93, 40), new array(50, 50, 15, 87));
不错，这都能正确地填充好。
画椭圆
drawEllipse(x, y, width, height);
示例：
jg.drawEllipse(20, 50, 70, 140);
或
jg.drawOval(20, 50, 70, 140);
要画圆，则是宽与高一样就行。
填充椭圆
fillEllipse(x, y, width, height);
示例：
jg.fillEllipse(20, 50, 71, 141);
或
jg.fillOval(20, 50, 71, 141);
画弧
fillArc(x, y, width, height, start-angle, end-angle);
示例：
jg.fillArc(20, 20, 41, 12, 270.0, 220.0);
总是从前面的角度顺时针转到后面的角度，即使前面的角度大于后面的角度
设置字体
setFont("font-family", "size+unit", style);
输出文字
drawString("text", x, y);
示例：
jg.setFont("arial", "15px", Font.ITALIC_BOLD);
jg.drawString("some text", 20, 50);
字体样式有以下几种值：plain、bold、italic、italic_bold、bold_italic
固定区域输出文字
drawStringRect("text", x, y, width, alignment);
示例：
jg.setFont("verdana", "11px", font.bold);
jg.drawStringRect("text", 20, 50, 300, "right");
alignment的内容就是css中text-align的内容：left、right、center、justify
输出图像文件
drawImage("src", x, y, width, height);
示例：
jg.drawImage("dog.jpg", 20, 50, 100, 150);
如果有宽度与高度，就会把图像拉长或压缩，如果没有，则显示图像的原大。
画的结果显示出来
paint();
示例：
jg.paint();
以上的画图代码，直到这个语句时才显示出来。
清除画板
clear();
示例：
jg.clear();
设为可打印的
setprintable(true);
示例：
jg.setprintable(true);
如果没有设置可打印，则画出来的图像打印不出来。设为true后，paint出来的图才能打印出来。
如果设为false，则这部分paint的就不能打印了。而文字与图像不管如何设置，都可以打印出来
。
示例的html文件
<html>
<head>
<title>test</title>
<script language="javascript" src="wz_jsgraphics.js" type="text/javascript"></script>
</head>
<body>
<input id="butdraw" value="draw" type="button" onclick="butdraw_click();" />
<div id="test" style="color:blue; left: 0px; overflow: visible; width: 400px; position: relative; top: 0px; height: 250px;background:#eeeeee; "></div>
<script type="text/javascript">
var jg=new jsGraphics("test");
function butdraw_click()
{
if (window.event) event.cancelbubble = true;
jg.setColor("#ff00ff");
jg.setStroke(1);
jg.setPrintable(false);
jg.drawLine(10, 10, 100, 100);
var xpoints = new Array(10, 85, 93, 60);
var ypoints = new Array(50, 10, 105, 87);
jg.drawPolyLine(xpoints, ypoints);
var ypoints = new Array(50, 10, 105, 87);
jg.drawPolyLine(xpoints, ypoints);
jg.setStroke(3);
jg.drawRect(20, 50, 70, 140);
jg.setColor("blue");
jg.fillRect(24, 54, 65, 135);
jg.drawRect(20, 50, 70, 140);
jg.setColor("blue");
jg.fillRect(24, 54, 65, 135);
var xpoints = new Array(10, 85, 33, 20);
var ypoints = new Array(50, 30, 105, 87);
jg.drawPolygon(xpoints, ypoints);
var ypoints = new Array(50, 30, 105, 87);
jg.drawPolygon(xpoints, ypoints);
jg.fillPolygon(new Array(20, 85, 93, 40), new Array(50, 50, 15, 87));
jg.drawEllipse(20, 50, 70, 140);
jg.drawOval(20, 50, 70, 70);
jg.drawOval(20, 50, 70, 70);
jg.fillEllipse(20, 50, 71, 141);
jg.fillOval(20, 50, 71, 141);
jg.fillOval(20, 50, 71, 141);
jg.fillArc(20, 20, 40, 40, 220.0, 270.0);
jg.setFont("arial","15px",Font.ITALIC_BOLD);
jg.setFont("arial", "15px", Font.PLAIN);
jg.drawString("some text", 20, 50);
jg.setFont("arial","15px",Font.ITALIC_BOLD);
jg.setFont("arial", "15px", Font.PLAIN);
jg.drawString("some text", 20, 50);
jg.drawRect(20, 50, 300, 140);
jg.setFont("verdana", "11px", Font.BOLD);
jg.drawStringRect("text", 20, 50, 300, "right");
jg.setFont("verdana", "11px", Font.BOLD);
jg.drawStringRect("text", 20, 50, 300, "right");
jg.drawImage("but04.gif", 20, 50);
jg.paint();
jg.paint();
//jg.clear();
}
</script>
</body>
</html>
}
</script>
</body>
</html>
分享到：
发表评论
-
javascript面向对象之一 类
2011-06-06 16:46 995javascript中的类多数是用 ... -
javascript面向对象之二 命名空间
2011-06-06 16:24 1227javascript中本没有命名空间的概念，但是要体现面向对象 ... -
网页特效代码
2011-06-01 16:38 10781. Flip! 一个 jQuery 插件 http://l ... -
js 操作select 大全
2010-11-04 13:49 7371判断select选项中 是否存在Value="pa ... -
Dialog 超酷js弹出层 完美兼容所有浏览器 华丽呈现超强功能
2010-11-03 13:05 1366http://www.iteye.com/topic/4800 ... -
IE6对display:table-row不支持
2010-11-02 19:34 1593http://topic.csdn.net/u/2010070 ... -
javascript中字符串转化为json对象
2010-07-30 09:11 1219http://www.json.org/js.html To ... -
IE6的base标签导致页面结构大混乱
2010-07-20 16:27 1069这是一个非常隐秘也是非常强大的bug，我真不知微软的IE开发人 ... -
汇总让IE6崩溃的几种方法
2010-07-20 16:25 1137经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章，数字 ... -
JS添加事件处理函数
2010-07-08 23:41 1088作为一种事件驱动的编 ... -
js压缩工具
2010-07-04 23:50 1798javascriptcompressor.com （ ... -
Javascript 中 ShowModalDialog 的使用方法
2010-06-21 16:13 1424ShowModalDialog函数的功能 ... -
xtree的基本应用---入门级
2010-06-21 16:08 1229由于公司要求做一棵关于公司员工选择的JS控件树，以前我们一直使 ... -
javascript实现上传图片前的预览效果
2010-06-16 20:35 1395<script>function yulan(){ ... -
重写window.confirm函数
2010-06-12 11:06 2349重写window.confirm函数为了让它能够默认选择取消按 ... -
改善window的alert提示信息框样式
2010-06-12 11:05 1452<input type="button&quo ... -
JavaScript图形库jsGraphics
2010-05-10 22:57 2478JavaScript图形库Raphaël < JavaS ... -
千一JS控件
2010-05-10 22:31 859千一JS控件－－滑块条 千一JS控件－－进度条 千一JS控 ... -
JavaScript 生成曲线图
2010-05-10 22:28 1251引用方法 new gov.Graphic(par1,par2 ... -
腾讯检测 IP 省市的接口
2010-05-10 22:26 1460利用 JavaScript 调用。 <script ...
相关推荐
JavaScript图形库 wz_jsgraphics 是一个强大的工具，专为在Web上创建动态和交互式的几何图形设计。这个库允许开发者利用JavaScript语言的灵活性和浏览器的原生支持，来绘制各种复杂的图形，包括直线、圆形和正方形等...
`wz_jsgraphics`是一个轻量级的JavaScript库，它提供了一套API，使得开发者能够使用`div`元素来构建复杂的图形和动画。这种方法的优点在于兼容性好，因为`div`元素是HTML的基础部分，几乎所有的现代浏览器都能很好地...
而“wz_jsgraphics.js”则很可能就是这个图形库的源代码文件，包含了一系列用于图形绘制的方法和函数。 学习和使用“wz_jsgraphics”，你需要了解JavaScript基础，特别是DOM操作和Canvas API。同时，查看库的文档或...
`wz_jsgraphics`是一个轻量级的库，它提供了一种简单的方式来在JavaScript中绘制矢量图形，特别适合那些不支持或者需要兼容老版本浏览器的应用。这篇博客文章“通过wz_jsgraphics在js上画图”可能深入探讨了如何使用...
JavaScript作为一种强大的客户端脚本语言，能够帮助我们实现在浏览器中绘制矢量图形，而wz_jsgraphics.js库就是这样一个专门用于JavaScript矢量绘图的工具。本文将深入探讨如何使用这个库以及其核心功能，旨在为...
至于压缩包内的文件" wz_jsgraphics"，这很可能是实现JavaScript图形绘制的一个库或者示例代码。它可能包含了用于创建各种图形的函数和方法，开发者可以参考和使用这些代码来快速实现自己的图形界面。 总结起来，...
`wz_jsgraphics.js`库还可能包含其他便利的功能，比如贝塞尔曲线、文字绘制等，这些功能使得在canvas上创建复杂的图形变得更加容易。此外，这个库可能对性能进行了优化，以处理大量的绘图操作，对于实时渲染或动画...
这涉及到对JavaScript图形库的使用，以及如何在网页上动态绘制图形的基本概念。 ### 标题：JavaScript曲线图 这一标题直接指出了文章的主题是关于使用JavaScript来创建曲线图。在现代Web开发中，动态生成图表是一...
总的来说，WZ JSGraphics是一个JavaScript图形库，为开发者提供了一个强大且灵活的平台，让他们能够在浏览器中创建各种各样的图形和动画。通过学习和利用这个库，开发者可以提升网页的交互性和视觉吸引力，同时减少...
JavaScript绘图函数库是开发网页动态图形的一种强大工具，它为开发者提供了丰富的API，使得在浏览器环境中绘制复杂的图形变得简单易行。在这个标题为“javascript绘图函数库”的资源中，我们主要关注的是如何利用...
wz_jsgraphics是一个专门用于在浏览器环境中进行图形绘制的JavaScript库。它提供了一系列的API，允许开发者创建复杂的2D图形，包括但不限于线条、形状、图像和文本。这个库特别适合那些希望在网页上展示数据可视化或...
这是一个专门为JavaScript设计的图形库，它提供了丰富的绘图功能，帮助开发者在HTML5 canvas上绘制各种图形，包括但不限于线条、矩形、圆形等。在实现仪表盘时，这个库可以帮助我们绘制出指针、刻度、面板等元素。 ...
`jsgraphics.js`库则提供了一种高效的方式来处理图形绘制，使得我们可以专注于仪表盘的逻辑而无需过多关注底层细节。 1. **jsgraphics.js库介绍** `jsgraphics.js`是一个轻量级的JavaScript库，专为在HTML5 canvas...
在提供的文件名中，`draw.html`可能是展示时钟的HTML页面，而`wz_jsgraphics.js`可能包含了JavaScript图形库，用于增强时钟的视觉效果，比如绘制指针或者动画效果。JavaScript图形库如Canvas或SVG可以用来创建动态的...
`wz_jsgraphics.js`是一个JavaScript图形库，它允许我们在HTML5的canvas元素上绘制图形。这个库可以用来创建流程图中的各个节点和连接线，实现图形的动态渲染。我们可以通过调用它的函数来绘制矩形、圆形、箭头等...
这个文件名可能是某个特定的JavaScript图形库或示例代码，但由于具体代码内容未给出，无法详细解释其功能和用法。通常，这类库或脚本会包含绘制图形所需的方法和数据结构，开发者需要将其引入项目中，并按照文档或...