javascript与CSS画图之基础篇

     要在浏览器上动态地画图（矢量图），个人觉得矢量图中最关键的两点：一、图显示的样式，即图形的颜色、透明度等；二、算法，即图形的样子，是简单的线、矩形、圆形、扇形、多边形等，javascript和CSS无疑是最佳搭档，所有的矢量图形最基本的元素是1*1px的点，点可以成线、成面，成任意图形。

    

    一切矢量图的根本____1*1px的点

如果对CSS有一定的了解，对 clip:rect(top,right,bottom,left)熟悉的话，可以知道，代码剪辑出一个区域，需要注意的是，clip:rect中的四个边的位置是相对于对象的而不是相对于窗口的，另外在此position必须为absolute。

 <div style="position:absolute;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>可以画出一个红色的点

 

    算法能成图的根本____在特定位置画点

    通过css的 left和top，在特定一个位置画图，将算法实现成可见图形的根源可以解决，如下这段代码可以在(100,100)的坐标位置画一个1*1px的红点

 

 <div style="position:absolute;left:100px;top:100px;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>

 

 

     成为有生产力代码的根本___抽象、精简

（如果只是上面一行代码，着实没有什么好研究的，相反如果把最根本的能很好的抽象出来，就大不一样了），

上面的一行代码其实可以抽象成，在特定坐标点上(x，y),画一个高度为h,宽度为w的区域，并且画笔的颜色为color，为了更方便利用，可以精炼成如下方法：

 function _mkDiv(x, y, w, h,color)
{
  '<div style="position:absolute;'+
  'left:' + x + 'px;'+
  'top:' + y + 'px;'+
  'width:' + w + 'px;'+
  'height:' + h + 'px;'+
  'clip:rect(0,'+w+'px,'+h+'px,0);'+
  'background-color:' + color +
  ';"><//div>';
}

1、点成线,在（x1,y1）和（x2,y2）两个坐标上划线

function _mkLin(x1, y1, x2, y2)
{
 if(x1 > x2)
 {
  var _x2 = x2;
  var _y2 = y2;
  x2 = x1;
  y2 = y1;
  x1 = _x2;
  y1 = _y2;
 }
 var dx = x2-x1, dy = Math.abs(y2-y1),
 x = x1, y = y1,
 yIncr = (y1 > y2)? -1 : 1;

 if(dx >= dy)
 {
  var pr = dy<<1,
  pru = pr - (dx<<1),
  p = pr-dx,
  ox = x;
  while(dx > 0)
  {--dx;
   ++x;
   if(p > 0)
   {
    this._mkDiv(ox, y, x-ox, 1);
    y += yIncr;
    p += pru;
    ox = x;
   }
   else p += pr;
  }
  this._mkDiv(ox, y, x2-ox+1, 1);
 }

 else
 {
  var pr = dx<<1,
  pru = pr - (dy<<1),
  p = pr-dy,
  oy = y;
  if(y2 <= y1)
  {
   while(dy > 0)
   {--dy;
    if(p > 0)
    {
     this._mkDiv(x++, y, 1, oy-y+1);
     y += yIncr;
     p += pru;
     oy = y;
    }
    else
    {
     y += yIncr;
     p += pr;
    }
   }
   this._mkDiv(x2, y2, 1, oy-y2+1);
  }
  else
  {
   while(dy > 0)
   {--dy;
    y += yIncr;
    if(p > 0)
    {
     this._mkDiv(x++, oy, 1, y-oy);
     p += pru;
     oy = y;
    }
    else p += pr;
   }
   this._mkDiv(x2, oy, 1, y2-oy+1);
  }
 }
}

2、划矩形

/*
以(x,y)和(w,h)两个坐标为顶点的四边形
以s像素为四条边的画笔粗度
*/
function _mkRect(x, y, w, h,s)
{
 this._mkDiv(x, y, w, s);//上边
 this._mkDiv(x+w, y, s, h);//右边
 this._mkDiv(x, y+h, w+s, s);//下边
 this._mkDiv(x, y+s, s, h-s);//左边
}