样例: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. CNCC2017中的深度学习与跨媒体智能

    CNCC2017中的深度学习与跨媒体智能 转载请注明作者:梦里茶 目录 机器学习与跨媒体智能 传统方法与深度学习 图像分割 小数据集下的深度学习 语音前沿技术 生成模型 基于贝叶斯的视觉信息编解码 珠 ...

  2. jQuery开发自定义插件 $.extend()与$.fn.extend()

    jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...

  3. POJ3191-The Moronic Cowmpouter

    The Moronic Cowmpouter Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4006   Accepted: ...

  4. spring mvc 复杂参数注入

    过了这么久,又重新把博客拾起来了 来上海工作也已经有将近两周的时间了, 今天在整理项目的时候,遇到了一个关于参数注入的问题 背景: 我的开发前台用的是extjs4,在对后台spring mvc提交表单 ...

  5. Python学习之--socket

    1.Socket概述   网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.socket通常也称作"套接字",用于描述IP地址和端口,是一个 ...

  6. 05.haproxy+mysql负载均衡 整合 redis集群+ssm

    本篇重点讲解haproxy+mysql负载均衡,搭建完成后与之前搭建的redis+ssm进行整合 (注:这里用到了两台mysql数据库,分别安装两台虚拟机上,已经成功实现主主复制,如果有需要,请查看我 ...

  7. node.js第二天之模块

    一.模块的定义 1.在Node.js中,以模块为单位划分所有功能,并且提供了一个完整的模块加载机制,这时的我们可以将应用程序划分为各个不同的部分. 2.狭义的说,每一个JavaScript文件都是一个 ...

  8. AspNet Core 程序写入配置信息并再次读取配置信息

    1.首先创见Core控制台应用程序  并且引入  AspNetCore.All 首先我们写入配置信息:直接代码如下 //配置信息的根对象 public static IConfigurationRoo ...

  9. 分布式服务Dubbo+Zookeeper安全认证

    前言 由于之前的服务都是在内网,Zookeeper集群配置都是走的内网IP,外网不开放相关端口.最近由于业务升级,购置了阿里云的服务,需要对外开放Zookeeper服务. 问题 Zookeeper+d ...

  10. Solr服务在Linux上的搭建

    一.系统环境 注:欢迎大家转载,非商业用途请在醒目位置注明本文链接和作者名dijia478即可,商业用途请联系本人dijia478@163.com. CentOS-6.7-i386-bin-DVD1 ...