使用JS画图之点、线、面

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多个点。视觉上，它就是一条直线。

代码如下:

ph ? ph : pw; //默认相邻点（左上角的像素点）间的距离

var diagonal = Math.sqrt(Math.pow(hdist,2) + Math.pow(vdist,2)); //斜边长度
var pn = parseInt(diagonal/gapp); //计算两点之间的点的数量
if(pn < 3){pn=pn3+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 相邻两点间的垂直距离
//hgaPi(pend[0]<pstart[0]?-1:1)(noslope?0:1) 相对于起点的水平偏移
//vgaPi(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: [(hgaPi(pend[0]<pstart[0]?-1:1)(noslope?0:1)+pstart[0]),(vgaPi*(pend[1]<pstart[1]?-1:1)+pstart[1])]
});
}
}

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

　　折线：

代码如下:

polyline(ps){ if(ps){ //画线 for(var i = 0; i}
}

　　多边形：

代码如下:

polygon(ps){ if(ps){ //画线 for(var i = 0; i 2){ drawLine(ps[ps.length-1],ps[0]) } //描拐点 for(var i = 0; i

　　矩形：

代码如下:

左上角的点的位置 //width 宽 //high 高 function drawRectangle(leftTop,width,high){ drawpolygon([ leftTop, [leftTop[0],leftTop[1]+high], [leftTop[0]+width,leftTop[1]] ]); //填充 //document.write(""); }

原来JS也可以做这么炫酷的事情，真是要好好研究下了

原文地址：https://www.jb51.cc/js/56364.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：javascript定义变量时带var与不带v下一篇：js函数与php函数的区别实例浅析