JS画几何图形之一【直线】

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

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

一、点

  这里的点我们使用span标签表示

//描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象
function drawPoint(opts){
    document.write("<span id=‘"+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]?("<div style=‘position: relative;‘><span style=‘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 参数
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]<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 点的一维数组
function drawPolyline(ps){
    if(ps){
        //画线
        for(var i = 0; i<ps.length-1; i++){
            drawLine(ps[i], ps[i+1]);
        }
        //描拐点
        for(var i = 0; i<ps.length; i++){
            drawPoint({
                pw: 3,
                ph: 3,
                color: ‘RED‘,
                point: ps[i]
            });
        }

    }
}

  多边形:

//多边形
//ps 点的一维数组
function drawPolygon(ps){
    if(ps){
        //画线
        for(var i = 0; i<ps.length-1; i++){
            drawLine(ps[i], ps[i+1]);
        }
        //使闭合
        if(ps.length > 2){
            drawLine(ps[ps.length-1], ps[0])
        }
        //描拐点
        for(var i = 0; i<ps.length; 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("<span style=‘height: "+(high-1)+"px; width: "+(width-1)+"px; background-color: "+"Green"+"; position: absolute; left:"+(leftTop[0]+1)+"px; top: "+(leftTop[1]+1)+"‘></span>");
}
时间: 2024-10-28 17:53:53

JS画几何图形之一【直线】的相关文章

JS画几何图形之六【过直线外一点作垂线】

样例:http://www.zhaojz.com.cn/demo/draw10.html //过直线外一点画垂线 function drawVerticalLine(point, line){ //画辅助线-start var color = 'DarkRed'; //垂线的颜色 var color2 = "#ccc"; //其它辅助线的颜色 drawPoint({ pw:2,ph:2,color:'DarkRed',point: line[0] }); drawPoint({ pw:

JS画几何图形之三【正弦曲线】

数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html JS函数的声明: //画正弦曲线 //dot 原点 //amplitude 振幅 -- A //initialPhase 初相 -- φ //setover 偏距 -- k //palstance 角速度 -- ω //len 周期数 function drawSinusoid(dot, amplitude,initialPhase,palstance,setover,

JS画几何图形之五【过圆外一点作切线】

样例:http://www.zhaojz.com.cn/demo/draw9.html //画切线 //point 圆外的一点 //dot 圆心 //r 半径 function drawCircleTangent(point, dot, r){ //画辅助线-start var color = 'DarkRed'; //切线的颜色 var color2 = "#ccc"; //其它辅助线的颜色 drawLine(dot, [dot[0]+9*r,dot[1]], {color: col

JS画几何图形之四【饼图】

饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html //饼图 //dot 圆点 //r 半径 //data 数据(一维数组) function drawPie(dot, r, data){ if(data && data.length > 0){ var accumulationAngleOfSlope = new Number(0); //累计偏移角度 var total = new Number(0); var

JS画几何图形之二【圆】

半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/draw6.html 一.圆 //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){ var pstart = [dot[0]+r, dot[1]]; //

【画一条直线】我们第一个(极小的)机器学习应用

画一条怎样的线? 在回答这个问题之前我们必须要了解另外两个问题: 1.为什么要画这条直线? 2.这条直线要具备怎样的特征? 其实这两个问题并不好回答,因为这必然会牵扯到机器学习的理论方面,我真的不想扯那么远(其实我不是很懂怕说错了),只从我们现在要处理的这个实际问题问题——“网站每小时的访问量”入手. 我们要解决的实际问题是:根据现有的访问量变化趋势,来预测未来访问量的变化,看是否会超出现有设备的承受范围,给出时间点,以便网站方能够做好应对方案. 可以说——总结规律,预测未来——就是我们要做的,

无聊js画了个菱形

function repeat(str, count) { return count < 0 ? '' : (new Array(count)).join(str); } function diamond(sign, size) { var d, s = '' for (var i = 0; i < size*2; i++) { d = Math.abs(size-i-1); console.log(d+1, 2*(size-d)); s += repeat(' ', d+1) + repea

用JS画斐波那契螺旋线(黄金螺旋线)

偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FibonacciSequence</title> </head> <body> <

纯CSS画几何图形

<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS画几何图形</title> </head> <body> <!--多彩空心矩形--> <div style="width:100px; height:100px; border-width:20px; border-style:solid