使用JS画图之点、线、面
JS画图的想法经过大脑的时候，觉得有点意思，所以就实践了一番。JS画图为系列文章，本是讲点、线和面
先看样例：http://www.zhaojz.com.cn/demo/draw5.html
一、点
这里的点我们使用span标签表示
//描点，参数有点的大小，颜色，点的坐标和标签;很明显opts参数是一个对象
functiondrawPoint(opts){
document.write("<spanid='"+opts.point[0]+""+opts.point[1]+"'style='display:inline-block;width:"+opts.pw+"px;height:"+opts.ph+"px;background-color:"+opts.color+";position:absolute"+opts.point[0]+"px;top:"+opts.point[1]+"px;'>"+(opts.point[2]?("<divstyle='position:relative;'><spanstyle='position:absolute;left:5px;bottom:1px;text-align:left;width:100px;'>"+opts.point[2]+"</span></div>"):"")+"</span>");
}
几个参数：
opts.pw:点的宽度
opts.ph:点的高度，一般与opts.pw相等
opts.color:点的颜色
opts.point:表示点的位置，point[0]:水平位置，point[1]:垂直位置point[2]为点的标签
注意：position属性，必须为absolute;
二、直线
直线是由点组成的嘛，因此我们要在两点之间描出n多个点。视觉上，它就是一条直线。
//画线
//pstart起点
//pend终点
//opts参数
functiondrawLine(pstart,pend,opts){
varph=1;
varpw=1;
varcolor="DarkRed";
if(opts){
color=opts.color?opts.color:color;
}
varslope;//斜率
varnoSlope=false;//是否有斜率
varhdist=pend[0]-pstart[0];
varvdist=pend[1]-pstart[1];
if(hdist!=0){
slope= Math.abs(vdist/hdist); //计算斜率
}else{
noSlope=true;//当hdist=0时，直线没有斜率
}
vargapp=pw>ph?ph:pw;//默认相邻点（左上角的像素点）间的距离
vardiagonal=Math.sqrt(Math.pow(hdist,2)+Math.pow(vdist,2));//斜边长度
varpn=parseInt(diagonal/gapp);//计算两点之间的点的数量
if(pn<3){pn=pn*3+1};//如果点的数量小于3，则加大点数；为什么+1呢，是保证pn=0时至少有一个点
varvgap=Math.abs(vdist)/pn;//相邻两点间的垂直距离
varhgap=Math.abs(hdist)/pn;//相邻两点间的水平距离
for(vari=0;i<pn;i++){
//描点
//hgap相邻两点间的水平距离
//vgap相邻两点间的垂直距离
//hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1)相对于起点的水平偏移
//vgap*i*(pend[1]<pstart[1]?-1:1)相对于起点的垂直偏移
//(pend[0]<pstart[0]?-1:1)水平偏移方向
//(pend[1]<pstart[1]?-1:1)垂直偏移方向
//(noSlope?0:1)直线没有斜率时，水平偏移为0
drawPoint({
pw:pw,
ph:ph,
color:color,
point:[(hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1)+pstart[0]),(vgap*i*(pend[1]<pstart[1]?-1:1)+pstart[1])]
});
}
}
在线的基础上可以画出折线和面：
折线：
//折线形
//ps点的一维数组
functiondrawPolyline(ps){
if(ps){
//画线
for(vari=0;i<ps.length-1;i++){
drawLine(ps[i],ps[i+1]);
}
//描拐点
for(vari=0;i<ps.length;i++){
drawPoint({
pw:3,
ph:3,
color:'RED',
point:ps[i]
});
}
}
}
多边形：
//多边形
//ps点的一维数组
functiondrawPolygon(ps){
if(ps){
//画线
for(vari=0;i<ps.length-1;i++){
drawLine(ps[i],ps[i+1]);
}
//使闭合
if(ps.length>2){
drawLine(ps[ps.length-1],ps[0])
}
//描拐点
for(vari=0;i<ps.length;i++){
drawPoint({
pw:3,
ph:3,
color:'RED',
point:ps[i]
});
}
}
}
矩形：
//画矩形
//leftTop左上角的点的位置
//width宽
//high高
functiondrawRectangle(leftTop,width,high){
drawPolygon([
leftTop,
[leftTop[0],leftTop[1]+high],
[leftTop[0]+width,leftTop[1]+high],
[leftTop[0]+width,leftTop[1]]
]);
//填充
//document.write("<spanstyle='height:"+(high-1)+"px;width:"+(width-1)+"px;background-color:"+"Green"+";position:absolute;left:"+(leftTop[0]+1)+"px;top:"+(leftTop[1]+1)+"'></span>");
}
原来JS也可以做这么炫酷的事情，真是要好好研究下了