新疆软件开发

本站首页 软件开发 成功案例 公司新闻 公司简介 客服中心 软件技术 网站建设
  您现在的位置: 新疆二域软件开发公司 >> 开发语言 >> 文章正文

看看javascript是如何绘图的

——点的实现与速度测试
Ps:本文只是一菜鸟画鸭之笔,有不对之处欢迎高手们指证!

一、背景知识:
   通过搜索,网上关于web绘图的实现大致有以下三类:
1 插件实现
     优点:功能丰富。护展性好,速度快。
     缺点:首次访问必须下载插件。
2 flash实现
     优点:首次访问不需要下载插件(大部分浏览已经安装有flash插件),画面质量高。
     缺点:速度较慢,需要懂得flash相关编程的知识。
3 js实现
     优点:首次访问不需要下载插件
     缺点:速度应该慢于插件的实现(没有测试),实现方法较牵强。
本文只介绍js实现。构思参照neweroica 于2003年发布的JS2D函数集。在小学的几何中我们就明白,绘图平面由线构成,而线是由点构成,所以,只要我们解决了点的绘制,则线,面只是一个循序渐进的过程。

二、思路解析:
 在newerroica的JS2D函数集中,点的绘制是通过table标签来实现的。也就是绘制一个无边框,无填充,一个单元格的表格,来实现点的显示。点的颜色、大小、位置则由table标签的style属性来定义。代码如下:
//Dottable.js

 

1/**//************* 画点 **************
2  x,y     点所在的屏幕坐标(像素)
3  color   颜色(字符串值)
4  size    大小(像素)
5**********************************/
6function drawDot(x,y,color,size){
7  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>");
8}

我的改进思路是,如果table可以实现,那么div是否同样可以实现,并且能够达到更快的速度呢,我简单的修改代码如下:
//Dotdiv.js

1/**//**********画点***********
2x,y   点的坐标(像素)
3color 点的颜色(字符串值)
4size  点在大小(像素)
5
6**********************/
7function drawDot(x,y,color,size){
8  document.write("<div style=’position: absolute; border:0;left: "+(x)+"; top: "+(y)+";background-color:"+color+"; width:"+size+"; height:"+size+"; overflow:hidden;’></div>");
9}
那么div是否真的比table快呢?我做了个简单的js测试程序段,这个程序段同样可用于更多的js脚本性能测试,代码如下:
//timer.js

 1/**//***********计时器****************
 2startime()       开始计时
 3endtime()        结束计时并输出时间
4
 5*********************************/
 6var ms;
 7//开始计时
 8function starttime() {
 9 then = new Date();
10 ms= then.getTime();
11 
12}
13
14//结束计时
15function endtime() {
16        now = new Date();
17 ms=now.getTime()-ms;
18 ms=ms/1000;
19 alert("共用时:"+ms+"秒");
20}
三、测试
构建测试用例,我们用两种方法,分别沿45度画5百个点,分别对所用时间计数:
Ps:我的机器配置:方正t3200c笔记本电脑,p41.5的cpu,内存384M。
Table实现的测试用例代码:

 1<html>
 2<head>
 3</head>
 4<body>
 5<script src="timer.js">
 6</script>
 7<script src="dottable.js">
 8</script>
 9
10
11<script language="javascript">
12    starttime();
13    for(i=0;i<500;i++){
14        drawDot(1+i,1+i,"ff0000",1);
15    } 
16
17    endtime();
18</script>
19
20</body>
21</html>
运行后返回时间:0.27秒
Div实现的测试用例代码:

 1<html>
 2<head>
 3</head>
 4<body>
 5<script src="timer.js">
 6</script>
 7<script src="dotdiv.js">
 8</script>
 9
10
11<script language="javascript">
12    starttime();
13    for(i=0;i<500;i++){
14        drawDot(1+i,1+i,"ff0000",1);
15    } 
16
17    endtime();
18</script>
19
20</body>
21</html>
运行后返回时间:0.11秒

显然,div的运行时间明显快于table.测试成功。

 

作者:未知 | 文章来源:未知 | 更新时间:2007-12-15 16:32:47

  • 上一篇文章:

  • 下一篇文章:

  • 相关文章:
    搜集整理的javascript select操作的例子
    javascript中createTextRange如何使用
    如何使用JavaScript判断浏览器类型代码
    如何在JavaScript实现弹出层效果
    JAVASCRIPT如何判断大小写字母
    J2EE开发中的错误处理
    javascript的function的总结
    Javascript访问html页面的控件
    软件技术
    · 开发语言
    · Java技术
    · .Net技术
    · 数据库开发
    最新文章  
    ·搜集整理的asp.net的验证方
    ·各种FOR循环结构的整理
    ·软件项目开发中应该考虑那
    ·搜集整理的javascript sel
    ·软件开发中项目经理有那些
    ·学习如何在Lambda表达式进
    ·C++基础知识:结构体数据的
    ·C#实现短信发送程序的例子
    ·sun最近修补了一部分java的
    ·rss定制的另外一种实现方式
    ·delphi实现利用arp欺骗来实
    ·基础学习:基于WF的流程框
    ·网络编程中怎样得知一次数
    ·如何逆序输出单链表?
    ·软件开发过程中的性能设计
    关于我们 | 软件开发 | 下载试用 | 客服中心 | 联系我们 | 友情链接 | 网站地图 | 新疆电子地图 | RSS订阅
    版权所有 © 2016 新疆二域软件开发网 www.k8w.net All Rights Reserved 新ICP备14003571号
    新疆软件开发总机:0991-4842803、4811639.
    客服QQ:596589785 ;地址:新疆乌鲁木齐北京中路华联大厦A-5C 邮编:830000