js画图的想法经过大脑的时候，觉得有点意思，所以就实践了一番。js画图为系列文章，本是讲点、线和面
先看样例：http://www.zhaojz.com.cn/demo/draw5.html
一、点
这里的点我们使用span标签表示
复制代码 代码如下:
//描点，参数有点的大小，颜色，点的坐标和标签; 很明显opts参数是一个对象
function drawpoint(opts){
    document.write(+(opts.point[2]?(+opts.point[2]+
):)+);
}
几个参数：
opts.pw: 点的宽度
opts.ph: 点的高度， 一般与opts.pw相等
opts.color: 点的颜色
opts.point: 表示点的位置，point[0]: 水平位置， point[1]: 垂直位置point[2]为点的标签
注意：position属性，必须为absolute;
二、直线
直线是由点组成的嘛，因此我们要在两点之间描出n多个点。视觉上，它就是一条直线。
复制代码 代码如下:
//画线
//pstart 起点
//pend 终点
//opts 参数
function drawline(pstart, pend, opts){
    var ph = 1;
    var pw = 1;
    var color = darkred;
    if(opts){
        color = opts.color ? opts.color: color;
    }
    var slope; //斜率
    var noslope = false; //是否有斜率
    var hdist = pend[0] - pstart[0];
    var vdist = pend[1] - pstart[1];
    if(hdist != 0){
        slope =  math.abs(vdist/hdist);  //计算斜率
    }else{
        noslope = true; //当hdist=0时，直线没有斜率
    }
    var gapp = pw > ph ? ph : pw; //默认相邻点（左上角的像素点）间的距离
var diagonal = math.sqrt(math.pow(hdist,2) + math.pow(vdist,2)); //斜边长度
    var pn = parseint(diagonal/gapp); //计算两点之间的点的数量
    if(pn     var vgap = math.abs(vdist)/pn; //相邻两点间的垂直距离
    var hgap = math.abs(hdist)/pn; //相邻两点间的水平距离
    for(var i = 0; i        //描点
        //hgap 相邻两点间的水平距离
        //vgap 相邻两点间的垂直距离
        //hgap*i*(pend[0]        //vgap*i*(pend[1]        //(pend[0]        //(pend[1]        //(noslope?0:1) 直线没有斜率时，水平偏移为0
        drawpoint({
            pw: pw,
            ph: ph,
            color: color,
            point: [(hgap*i*(pend[0]        });
    }
}
在线的基础上可以画出折线和面：
折线：
复制代码 代码如下:
//折线形
//ps 点的一维数组
function drawpolyline(ps){
    if(ps){
        //画线
        for(var i = 0; i            drawline(ps[i], ps[i+1]);
        }
        //描拐点
        for(var i = 0; i            drawpoint({
                pw: 3,
                ph: 3,
                color: 'red',
                point: ps[i]
            });
        }
}
}
多边形：
复制代码 代码如下:
//多边形
//ps 点的一维数组
function drawpolygon(ps){
    if(ps){
        //画线
        for(var i = 0; i            drawline(ps[i], ps[i+1]);
        }
        //使闭合
        if(ps.length > 2){
            drawline(ps[ps.length-1], ps[0])
        }
        //描拐点
        for(var i = 0; i            drawpoint({
                pw: 3,
                ph: 3,
                color: 'red',
                point: ps[i]
            });
        }
    }
}
矩形：
复制代码 代码如下:
//画矩形
//lefttop 左上角的点的位置
//width 宽
//high 高
function drawrectangle(lefttop, width, high){
    drawpolygon([
        lefttop,
        [lefttop[0], lefttop[1]+high],
        [lefttop[0]+width, lefttop[1]+high],
        [lefttop[0]+width, lefttop[1]]
    ]);
    //填充
    //document.write();
}
原来js也可以做这么炫酷的事情，真是要好好研究下了