JS画图的想法经过大脑的时候，觉得有点意思，所以就实践了一番。JS画图为系列文章，本是讲点、线和面

一、点

这里的点我们使用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(pn < 3){pn=pn*3+1}; //如果点的数量小于3，则加大点数；为什么+1呢，是保证pn=0时至少有一个点

var vgap = Math.abs(vdist)/pn; //相邻两点间的垂直距离

var hgap = Math.abs(hdist)/pn; //相邻两点间的水平距离

for(var i = 0; i< pn ; i++){

//描点

//hgap 相邻两点间的水平距离

//vgap 相邻两点间的垂直距离

//hgap*i*(pend[0]

//vgap*i*(pend[1]

//(pend[0]

//(pend[1]

//(noSlope?0:1) 直线没有斜率时，水平偏移为0

drawPoint({

pw: pw,

ph: ph,

color: color,

point: [(hgap*i*(pend[0]

});

}

}

在线的基础上可以画出折线和面：

折线：

//折线形

//ps 点的一维数组

function drawPolyline(ps){

if(ps){

//画线

for(var i = 0; i

drawLine(ps[i], ps[i+1]);

}

//描拐点

for(var i = 0; i

drawPoint({

pw: 3,

ph: 3,

color: 'RED',

point: ps[i]

});

}

}

}

多边形：

//多边形

//ps 点的一维数组

function drawPolygon(ps){

if(ps){

//画线

for(var i = 0; i

drawLine(ps[i], ps[i+1]);

}

//使闭合

if(ps.length > 2){

drawLine(ps[ps.length-1], ps[0])

}

//描拐点

for(var i = 0; i

drawPoint({

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也可以做这么炫酷的事情，真是要好好研究下了

相关标签：JS 画图

本文原创发布php中文网，转载请注明出处，感谢您的尊重！