一、图显示的样式，即图形的颜色、透明度等；二、算法，即图形的样子，是简单的线、矩形、圆形、扇形、多边形等，javascript和CSS无疑是最佳搭档，所有的矢量图形最基本的元素是1*1px的点，点可以成线、成面，成任意图形。

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

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

<div></div>可以画出一个红色的点

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

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

<div></div>

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

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

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

复制代码 代码如下:

function _mkDiv(x, y, w, h,color)

{

'<div+

'left:' + x + 'px;'+

'top:' + y + 'px;'+

'width:' + w + 'px;'+

'height:' + h + 'px;'+

'clip:rect(0,'+w+'px,'+h+'px,0);'+

'background-color:' + color +

';"></div>';

}