JavaScript与CSS绘制矢量图基础：利用1x1像素点构建图形

矢量图形绘制原理：从1x1像素点开始

图形显示主要包含两个维度：一是视觉样式，如颜色与透明度；二是算法逻辑，决定图形形态，例如直线、矩形、圆形、扇形或多边形等。JavaScript与CSS配合是实现这些矢量图形的最佳方案，因为所有矢量图形最基础的构成单元是1*1px的点，点可以连成线、扩展成面，进而构成任意图形。

一切矢量图的根本基础在于1*1px的点。

利用CSS clip属性定义显示区域

若对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>';
}