js绘图研究（一）

Js绘图研究（一）
——点的实现与速度测试
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**********************************/
6 function  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**********************/
7 function  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*********************************/
 6 var  ms;
 7 // 开始计时
 8 function  starttime()  {
 9 then = new Date();
10 ms= then.getTime();
11 
12}
13
14 // 结束计时
15 function  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.测试成功。

未完待续