样例: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); //画垂线
}

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

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

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 ...

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

    样例:http://www.zhaojz.com.cn/demo/draw9.html 依赖:[点].[直线].[圆] //画切线 //point 圆外的一点 //dot 圆心 //r 半径 func ...

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

    数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html 依赖:[点].[直线] JS函数的声明: //画正弦曲线 //dot 原点 ...

  4. JS画几何图形之二【圆】

    半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/dr ...

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

    饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 依赖:[扇形] //饼图 //dot 圆点 //r 半径 //data 数据(一 ...

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

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

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

    偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...

  8. js画一棵树

    用纯js画一棵树.思路: 1.一棵树的图片,作为页面背景: 2.通过html5中的canvas画布进行遮罩: 3.定时每隔10ms,从下往上清除1px的遮罩: <!DOCTYPE html> ...

  9. jquery.wordexport.js打印echarts.js画出的柱状图

    jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...

随机推荐

  1. CCF考试认证模拟练习——数字排序

    #include<iostream>#include<algorithm>using namespace std;struct node //定义结构体{ int num;// ...

  2. MongoDB一:入门(安装与配置)

    一.简介 MongoDB  是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. mongoDB MongoDB 是一个介于关系数据库和非关系数据库 ...

  3. 集合、增强for、泛型

    Collection集合:Collection是层次结构中的根接口,存储的元素为对象,(也就是说只能存储引用数据类型,不能存储基础数据类型),具体可查询API.集合与数组的区别:1.集合只能存放引用数 ...

  4. 边框(Border) 和 轮廓(Outline) 属性

    border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...

  5. <算法>进制转换超详细

    16转10 用竖式计算: 16进制数的第0位的权值为16的0次方,第1位的权值为16的1次方,第2位的权值为16的2次方 第0位: 5 * 16^0 = 5 第1位: F * 16^1 = 240 第 ...

  6. MongoDB之建立Windows和本地虚拟机的双向连接

    本文主要分享如何将MongoDB数据库在Windows系统和本地虚拟机系统建立双向连接,我们将借助MongoDB的可视化工具Robomongo来实现.首先,应该确保你的Windows系统和本地虚拟机系 ...

  7. Zend_Json 简介 --(手冊)

    1.  简单介绍 Zend_Json 提供一个方便的方式来串联(native的)PHP(的变量)和JSON,并将JSON(对象)解码到PHP中. 2.  基本使用方法 Zend_Json的使用包含使用 ...

  8. EularProject 43: 带条件约束的排列组合挑选问题

    Sub-string divisibility Problem 43 The number, 1406357289, is a 0 to 9 pandigital number because it ...

  9. 我的GIS观

    申明: 文章所述观点与不论什么组织或个人无关,仅代表我个人观点,如有不正确,还望批评指正. 概述: 从毕业到如今,在GIS这条路上也算是摸爬滚打4.5年了.说长也不长,说短也不短.在这4.5年的时间里 ...

  10. HTML中在a标签中添加onclick事件

    1.链接的onclick 事件被先执行,其次是href属性下的动作; 2.假设链接中同时存在href 与onclick,如果想让href 属性下的动作不执行,onclick 必须得到一个false的返 ...