当前位置:Gxlcms > JavaScript > 使用JS画图之点、线、面_javascript技巧

使用JS画图之点、线、面_javascript技巧

时间:2021-07-01 10:21:17 帮助过:8人阅读

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

先看样例:http://www.zhaojz.com.cn/demo/draw5.html

一、点

  这里的点我们使用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也可以做这么炫酷的事情,真是要好好研究下了

人气教程排行