一个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**********************************/
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() 结束计时并输出时间 [Page]
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.ge
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() 结束计时并输出时间 [Page]
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.ge