`
liss
  • 浏览: 844139 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript图形库jsGraphics

阅读更多

JavaScript图形库Raphaël < JavaScript图形库jsGraphics > AWT、SWING与SWT、JFACE比较

此JavaScript图形库可在网页上动态绘制圆、椭圆、斜线、折线、多边形(包括三角形、矩形)。底层通过创建大量1px*1px的DIV实现,同时对于连续的像素进行了优化,尽量地减少所需的DIV,因此有较好的性能,当然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML及HTML Canvas是无法相比较的。网站:http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm 。使用LGPL协议发布。
1、效果
在新窗口查看图片
2、优化原理
在新窗口查看图片

支持的浏览器
Linux: Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror, Opera 5, 6 and 7+.
Windows: Gecko-Browsers, IE 4, 5 and 6, Opera 5, 6 and 7+.
Mac: Safari, Gecko-Browsers, Opera, partially IE.

使用方法:
1、下载,并在页面中引入脚本:<script type="text/javascript" src="wz_jsgraphics.js"></script>
2、创建一个Div作为画布:
<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
3、在JavaScript中创建对象:

  1. <script type="text/javascript"> 
  2. <!--方法一: 
  3. var jg = new jsGraphics("myCanvas"); 
  4. //--> 
  5. </script> 
  6. <script type="text/javascript"> 
  7. <!--方法二: 
  8. var cnv = document.getElementById("myCanvas"); 
  9. var jg = new jsGraphics(cnv); 
  10. //--> 
  11. </script>  

4、例子:

  1. <script type="text/javascript"
  2. <!-- 
  3. function myDrawFunction() 
  4.   jg_doc.setColor("#00ff00"); // green 
  5.   jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document 
  6.   jg_doc.setColor("maroon"); 
  7.   jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70)); 
  8.   jg_doc.paint(); // draws, in this case, directly into the document 
  9.  
  10.   jg.setColor("#ff0000"); // red 
  11.   jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas" 
  12.   jg.setColor("#0000ff"); // blue 
  13.   jg.fillRect(110, 120, 30, 60); 
  14.   jg.paint(); 
  15.  
  16.   jg2.setColor("#0000ff"); // blue 
  17.   jg2.drawEllipse(10, 50, 30, 100); 
  18.   jg2.drawRect(400, 10, 100, 50); 
  19.   jg2.paint(); 
  20.  
  21. var jg_doc = new jsGraphics(); // draw directly into document 
  22. var jg = new jsGraphics("myCanvas"); 
  23. var jg2 = new jsGraphics("anotherCanvas"); 
  24.  
  25. myDrawFunction(); 
  26.  
  27. //--> 
  28. </script>  
分享到:
评论

相关推荐

    wz_jsgraphics(1).zip_javascript 图形_wz_jsgraphics_wz_jsgraphics.j

    JavaScript图形库 wz_jsgraphics 是一个强大的工具,专为在Web上创建动态和交互式的几何图形设计。这个库允许开发者利用JavaScript语言的灵活性和浏览器的原生支持,来绘制各种复杂的图形,包括直线、圆形和正方形等...

    wz_jsgraphics.js javascript 画图

    至于压缩包内的文件" wz_jsgraphics",这很可能是实现JavaScript图形绘制的一个库或者示例代码。它可能包含了用于创建各种图形的函数和方法,开发者可以参考和使用这些代码来快速实现自己的图形界面。 总结起来,...

    wz_jsgraphics

    而“wz_jsgraphics.js”则很可能就是这个图形库的源代码文件,包含了一系列用于图形绘制的方法和函数。 学习和使用“wz_jsgraphics”,你需要了解JavaScript基础,特别是DOM操作和Canvas API。同时,查看库的文档或...

    wz_jsgraphics DIV画图

    `wz_jsgraphics`是一个轻量级的JavaScript库,它提供了一套API,使得开发者能够使用`div`元素来构建复杂的图形和动画。这种方法的优点在于兼容性好,因为`div`元素是HTML的基础部分,几乎所有的现代浏览器都能很好地...

    js画矢量图(wz_jsgraphics.js)

    JavaScript作为一种强大的客户端脚本语言,能够帮助我们实现在浏览器中绘制矢量图形,而wz_jsgraphics.js库就是这样一个专门用于JavaScript矢量绘图的工具。本文将深入探讨如何使用这个库以及其核心功能,旨在为...

    通过wz_jsgraphics在js上画图

    `wz_jsgraphics`是一个轻量级的库,它提供了一种简单的方式来在JavaScript中绘制矢量图形,特别适合那些不支持或者需要兼容老版本浏览器的应用。这篇博客文章“通过wz_jsgraphics在js上画图”可能深入探讨了如何使用...

    javascript绘图函数库

    在HTML5中,Canvas元素的引入为JavaScript图形绘制打开了新的可能。Canvas提供了一个二维绘图表面,可以通过JavaScript API在其中绘制线条、形状、图像等。 描述中提到的“绘图函数库”通常是为了简化开发者的工作...

    Javascript画图js包

    总的来说,WZ JSGraphics是一个JavaScript图形库,为开发者提供了一个强大且灵活的平台,让他们能够在浏览器中创建各种各样的图形和动画。通过学习和利用这个库,开发者可以提升网页的交互性和视觉吸引力,同时减少...

    wz_jsgraphics.js 在图片上画直线、圆、矩形

    `wz_jsgraphics.js`是一个JavaScript库,专为在HTML5 canvas元素上进行图形绘制提供便捷的功能。这篇博客文章()详细介绍了如何使用这个库来在图片上绘制直线、圆和矩形,这在创建交互式图表、游戏或可视化应用时...

    JavaScript曲线图

    这涉及到对JavaScript图形库的使用,以及如何在网页上动态绘制图形的基本概念。 ### 标题:JavaScript曲线图 这一标题直接指出了文章的主题是关于使用JavaScript来创建曲线图。在现代Web开发中,动态生成图表是一...

    纯JavaScript实现HTML业务流程图

    `wz_jsgraphics.js`是一个JavaScript图形库,它允许我们在HTML5的canvas元素上绘制图形。这个库可以用来创建流程图中的各个节点和连接线,实现图形的动态渲染。我们可以通过调用它的函数来绘制矩形、圆形、箭头等...

    js画图包及使用方法

    wz_jsgraphics是一个专门用于在浏览器环境中进行图形绘制的JavaScript库。它提供了一系列的API,允许开发者创建复杂的2D图形,包括但不限于线条、形状、图像和文本。这个库特别适合那些希望在网页上展示数据可视化或...

    js开发时钟(浏览器兼容)

    在提供的文件名中,`draw.html`可能是展示时钟的HTML页面,而`wz_jsgraphics.js`可能包含了JavaScript图形库,用于增强时钟的视觉效果,比如绘制指针或者动画效果。JavaScript图形库如Canvas或SVG可以用来创建动态的...

    使用javascript制作流程图

    在本项目中,可能使用了SVG库,如`wz_jsgraphics.js`,来绘制流程图的各种形状。 2. **jQuery库**: `jquery-1.3.js`表明项目中使用了jQuery,这是一个流行的JavaScript库,简化了DOM操作、事件处理和Ajax交互。...

    js 画图类库 js折线图 js饼状图 js柱状图

    这个文件名可能是某个特定的JavaScript图形库或示例代码,但由于具体代码内容未给出,无法详细解释其功能和用法。通常,这类库或脚本会包含绘制图形所需的方法和数据结构,开发者需要将其引入项目中,并按照文档或...

Global site tag (gtag.js) - Google Analytics