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:2,ph:2,color:‘DarkRed‘,point: line[1]
    });
    drawLine(point, line[0], {color: color2});
    drawLine(point, line[1], {color: color2});
    //画辅助线-end

    drawPoint({
        pw:2,ph:2,color:‘DarkRed‘,point: point
    });

    var v_1_0 = line[1][1]-line[0][1];
    var h_1_0 = line[1][0]-line[0][0];
    var c_square = Math.pow(v_1_0,2) + Math.pow(h_1_0,2);
    var c = Math.sqrt(c_square); //计算直线上两点之间的距离

    var a_b_slope = 0;
    var hasSlope = true;
    if(v_1_0 == 0){
        hasSlope = false;
    }
    a_b_slope = v_1_0/h_1_0; //直线的斜率

    var point_pos = 1; //定义point与直线的位置关系
    //当直线的斜率大于0时,如果点在直线上方,point_pos = 1,如果点在直线下方,point_pos = 3
    //当直线的斜率小于0时,如果点在直线上方,point_pos = 2,如果点在直线下方,point_pos = 4
    if(hasSlope){
        var a_b_intercept = line[1][1]-a_b_slope*line[1][0];
        var p_intercept = point[1]-a_b_slope*point[0];
        if(a_b_slope >= 0){
            if(p_intercept > a_b_intercept){
                point_pos = 3;
            }else{
                point_pos = 1;
            }
        }else{
            if(p_intercept < a_b_intercept){
                point_pos = 2;
            }else{
                point_pos = 4;
            }
        }
    }
    //A为直线与水平线的夹角(锐角)
    var sinA = Math.abs(v_1_0)/c; //sinA
    var cosA = Math.abs(h_1_0)/c; //cosA
    //C为垂线在顺时针方向上与水平线的夹角
    var sinC = 0;
    var cosC = 0;
    //D为过point与line的平行线与水平线的夹角
    var sinD = 0;
    var cosD = 0;
    switch(point_pos){
    case 1:
        sinC = cosA;
        cosC = -sinA;
        sinD = -cosC;
        cosD = sinC;
        break;
    case 2:
        sinC = cosA;
        cosC = sinA;
        sinD = cosC;
        cosD = -sinC;
        break;
    case 3:
        sinC = -cosA;
        cosC = sinA;
        sinD = cosC;
        cosD = -sinC;
        break;
    case 4:
        sinC = -cosA;
        cosC = -sinA;
        sinD = -cosC;
        cosD = sinC;
        break;
        default:
    }
    //过point画line的平行线
    drawLine(point, [point[0]+c*cosD, point[1]+c*sinD], {color: ‘Red‘});
    drawLine(point, [point[0]+c*(-cosD), point[1]+c*(-sinD)], {color: ‘Red‘});

    var point_v_1 = point[1]-line[1][1];
    var point_h_1 = point[0]-line[1][0];
    var point_dist_1 = Math.sqrt(Math.pow(point_v_1,2)+Math.pow(point_h_1,2)); //point到line上一点的距离
    var point_v_0 = point[1]-line[0][1];
    var point_h_0 = point[0]-line[0][0];
    var point_dist_0 = Math.sqrt(Math.pow(point_v_0,2)+Math.pow(point_h_0,2)); //point到line上另外一点的距离
    var s = (c+point_dist_1+point_dist_0)/2;
    var area = Math.sqrt(s*(s-c)*(s-point_dist_0)*(s-point_dist_1)); //以point、line[0]和line[1]为顶点的三角形的面积
    var h = 2*area/c; //三角形的高

    var vpoint = [point[0]+h*cosC, point[1]+h*sinC]; //垂点
    drawLine(point, vpoint); //画垂线
}
时间: 2024-10-29 18:21:26

JS画几何图形之六【过直线外一点作垂线】的相关文章

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

JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 这里的点我们使用span标签表示 //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){ document.write("<span id='"+opts.point[0]+""+opts

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画几何图形之三【正弦曲线】

数学式: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/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]]; //

MT【45】抛物线外一点作抛物线的切线(尺规作图题)

注1:S为抛物线焦点 注2:由切线的唯一性,以及切线时可以利用MT[42]评得到三角形全等从而得到切线平分$\angle MQS$得到

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

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

无聊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

纯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