## 一、 勾股定理
![](https://box.kancloud.cn/3d98de9f53d22e5f2dd9302ec116a36d_223x220.jpg)
已知两点坐标(p1: [0, 4] p2: [3, 0]),求两点连线长度
~~~
var length = Math.sqrt(Math.pow((p1[0]-p2[0]), 2)+Math.pow((p1[1]-p2[1]), 2));
~~~
## 二、两点间的中点
~~~
var centerPoint = [(p1[0]+p2[0])/2, (p1[1]+p2[1])/2];
~~~
## 三、已经两点和比率求两点间这个比率的点
~~~
var rate = 0.5;
var point = [(p1[0]+(p2[0]-p1[0])*0.5), (p1[1]+(p2[1]-p1[1])*0.5)];
~~~
## 四、任意一点到线段的最短距离
~~~
function calcShortestLength(p3) {
var p1 = [0, 4],
p2 = [3, 0];
var length = Math.sqrt(Math.pow((p1[0]-p2[0]), 2)+Math.pow((p1[1]-p2[1]), 2)), // 两点连线长度
length1 = Math.sqrt(Math.pow((p3[0]-p1[0]), 2)+Math.pow((p3[1]-p1[1]), 2)), // 某一点到点1的长度
length2 = Math.sqrt(Math.pow((p3[0]-p2[0]), 2)+Math.pow((p3[1]-p2[1]), 2)); // 某一点到点2的长度
var subLength = Math.abs((Math.pow(length1, 2)+Math.pow(length, 2)-Math.pow(length2, 2))/(2*length)), // 两点连线中的一段长度
vLength = Math.sqrt(Math.pow(length1, 2)-Math.pow(subLength, 2)); // 重直长度(也就是最短长度)
if(length1 > length) { // 点在点1方向的延长线上/外
return length2;
} else if(length2 > length) { // 点在点2方向的延长线上/外
return length1;
} else if(length1<length && length2<length) { // 点在以线为直径的圆内
return vLength;
} else if(length1+length2 == length) { // 点在线上
return 0;
}
}
calcShortestLength([6, 6]);
~~~
直接某一段的长度
![](https://box.kancloud.cn/fc2e0b4a5ac938afba581ba05c261def_290x235.jpg)
已知3边的长度,求蓝绿色虚线(x)的长度
~~~
Math.pow(8, 2) - Math.pow(x, 2) = Math.pow(4, 2) - Math.pow((12-x), 2);
~~~
## 五、斜率(直接相对于横轴的倾斜角度也就是tanα)
![](https://box.kancloud.cn/87a07e3a4f15fc51d046db8ab7ae50ae_214x164.jpg)
~~~
var k = (p2[1]-p1[1]) / (p2[0]-p1[0])
~~~
## 六、圆弧的长度
![](https://box.kancloud.cn/8dd8f2e708ade2b8d2b8cee8b07dc885_244x185.jpg)
~~~
var radius = 5, // 半径
angle = 60; // 角度
// 圆周长
var perimeter = 2 * Math.PI * radius;
// 弧长
var arcLength = perimeter * (angle / 360);
~~~
反之,已知弧长也可以求角度。。
look here.
![](https://box.kancloud.cn/4cc50b3acea040bfc2175758880ede9d_320x148.jpg)
~~~
// 参照圆弧长度计算方式
var angle = (360 * arcLength) / perimeter;
~~~
进一步计算B->A连接长度(x)
~~~
// Math.sin(α/2) = (x/2) / r;
var x = Math.sin(α/2) * 2 * r;
~~~
圆弧的面积公式
S=1/2LR(L弧长,R半径)
~~~
var radius =5,
arcLength = 10;
var arcArea = arcLength * radius / 2;
~~~
## 七、三角度的面积(底 * 高 / 2)
![](https://box.kancloud.cn/238ef49f4bf4bdefca516453d8f01c04_80x53.jpg)
![](https://box.kancloud.cn/44e05a276c8ee9dc1e6d7b627f6c570e_186x116.jpg)
~~~
var area = 12 * 5 / 2;
~~~
平行四边形是两个三个形中其中一个按照某一点旋转180度得来的,所以平行四边形的面积为:底 * 高
## 八、圆的面积公式
![](https://box.kancloud.cn/2f7a30d5aef6879dab02ffe929873896_72x29.jpg)
~~~
var radius = 5;
var circleArea = Math.PI * Math.pow(radius, 2);
~~~
## 九、球的表面积公式
![](https://box.kancloud.cn/ee31cbd9a4ded17904420b0787d29df1_94x39.jpg)
~~~
var radius = 5;
var ballArea = 4 * Math.PI * Math.pow(radius, 2);
~~~
球的体积公式
![](https://box.kancloud.cn/5f354c5313f579e3ccd020995b993e9e_99x47.jpg)
~~~
var radius = 5;
var ballBulk = 4 / 3 * Math.PI * Math.pow(radius, 3);
~~~
## 十、圆锥的体积公式(底面积 * 高 / 3)
![](https://box.kancloud.cn/57cd7da5aeda477f66535e3d5096ea5e_82x44.jpg)
~~~
var radius = 5,
height = 10;
var area = Math.PI * Math.pow(radius, 2);
var coneBulk = area * height / 3;
~~~
圆锥的侧面积公式
![](https://box.kancloud.cn/635bf6acfabae9032d993fd0c54a99d2_548x55.jpg)
![](https://box.kancloud.cn/f9894899ec1bba5de95be124189ace39_271x252.jpg)
剖开来就是计算圆弧的面积了
~~~
var r = 5,
l = 10;
var arcLength = 2 * Math.PI * r;
var s = arcLength * l / 2;
~~~
- 事件
- mouse缩放与拖动
- drag拖动
- 事件兼容
- animation/transition
- canvas
- 改变图片颜色
- html转图片
- 视频操作
- 图片缩放、水印、放大镜
- 虚线
- 圆环进度条
- 形状事件
- 圆角矩形
- 绘制注意
- arcTo与贝塞尔
- 椭圆及椭圆进度
- 五角星进度
- 常用图形
- 计算显示文本宽度
- 算法
- 几何算法
- 地图应用相关
- 运行符
- web安全
- 新窗口打开
- xss
- 分享交流
- php环境搭建及xhr交互
- node环境搭建及xhr交互
- node之socketio
- svg之入门介绍
- svg动画
- vue之搜索联想
- vue之登录和echarts
- vue之组件交互与slot
- vue之loading
- vue之上传进度
- webpack及cli
- 开发技巧
- 常用
- 移动端
- 错误处理
- 预加载
- 代理判断
- 数组扩展
- 对象扩展
- 字符串扩展
- 语音播报
- 收集
- 文章/日记
- 框架/库/插件
- 工具
- 学习网站
- 专业术语
- 正则
- 常用验证
- 方法基础
- es6扩展
- 深入实践
- 快捷使用
- html
- css
- http协议
- http
- https
- socket
- 地图/图表
- mapbox
- echarts
- arcgis
- MapView及事件
- 添加WMS/WMTS层
- 增删点线面
- 入门使用
- popup弹层
- 大数据处理
- 批量点
- 批量线
- 在线绘制
- GraphicLayer显示/隐藏
- 动态改变位置
- 去除版权信息
- 添加控件
- Symbol
- 自定义path标记
- 图片标记
- 文本标记
- 旋转
- UI
- 自定义
- 3D地图
- 创建实例
- basemap
- 底图切换
- 自定义底图
- 中心和范围
- pupup弹层更新
- 坐标转换
- 方向线
- leaflet
- amap
- 框架/类库/脚手架
- vue
- 常见问题
- 组件框架
- vue-router
- 命名视图
- url参数映射到prop
- sublime支持
- 随手记
- 常用功能
- threejs
- 常用效果
- 其他特效
- requirejs
- 简单使用
- jquery
- 方法扩展
- 使用笔记
- 组件扩展
- react
- 党见问题
- 学习笔记
- 学习笔记-进阶
- react-redux
- react-router
- redux
- 其他模块说明
- 组件框架
- sublime支持
- gulp
- 安装使用
- js压缩
- css压缩
- 组合使用
- copy文件
- 项目使用
- protobuf
- 入门
- layui
- 登录验证
- laydate
- 安装工具
- yarn
- reactNative
- 入门介绍
- vueNative
- 入门介绍
- 版本控制
- git常用
- git扩展
- git问题
- git其他
- git扩展2
- 编辑器
- vscode
- atom
- webstorm
- 插件
- clipboard
- 奇淫巧技
- js
- 个性打印
- css
- 滤镜效果
- 文本省略
- 当前色
- 新特性
- 花样边框效果
- 波纹效果
- 个性placeholder
- 伪元素内容
- 容器居中
- 知识点
- js
- 递归
- 沙箱
- 内存泄漏
- es6语法
- 变量介绍
- FileRead
- ajax
- web存储
- css
- rem布局