使用JS画图之点、线、面_javascript技巧

    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(pnvar 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) 直线没有斜率时，水平偏移为0drawPoint({pw: pw,ph: ph,color: color,point: [(hgap*i*(pend[0]});}}在线的基础上可以画出折线和面：折线：代码如下://折线形//ps 点的一维数组function drawPolyline(ps){if(ps){//画线for(var i = 0; idrawLine(ps[i], ps[i+1]);}//描拐点for(var i = 0; idrawPoint({pw: 3,ph: 3,color: 'RED',point: ps[i]});}}}多边形：代码如下://多边形//ps 点的一维数组function drawPolygon(ps){if(ps){//画线for(var i = 0; idrawLine(ps[i], ps[i+1]);}//使闭合if(ps。
    length >2){drawLine(ps[ps。length-1], ps[0])}//描拐点for(var i = 0; idrawPoint({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也可以做这么炫酷的事情，真是要好好研究下了。