## 一、 勾股定理

已知兩點坐標(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]);
~~~
直接某一段的長度

已知3邊的長度,求藍綠色虛線(x)的長度
~~~
Math.pow(8, 2) - Math.pow(x, 2) = Math.pow(4, 2) - Math.pow((12-x), 2);
~~~
## 五、斜率(直接相對于橫軸的傾斜角度也就是tanα)

~~~
var k = (p2[1]-p1[1]) / (p2[0]-p1[0])
~~~
## 六、圓弧的長度

~~~
var radius = 5, // 半徑
angle = 60; // 角度
// 圓周長
var perimeter = 2 * Math.PI * radius;
// 弧長
var arcLength = perimeter * (angle / 360);
~~~
反之,已知弧長也可以求角度。。
look here.

~~~
// 參照圓弧長度計算方式
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)


~~~
var area = 12 * 5 / 2;
~~~
平行四邊形是兩個三個形中其中一個按照某一點旋轉180度得來的,所以平行四邊形的面積為:底 * 高
## 八、圓的面積公式

~~~
var radius = 5;
var circleArea = Math.PI * Math.pow(radius, 2);
~~~
## 九、球的表面積公式

~~~
var radius = 5;
var ballArea = 4 * Math.PI * Math.pow(radius, 2);
~~~
球的體積公式

~~~
var radius = 5;
var ballBulk = 4 / 3 * Math.PI * Math.pow(radius, 3);
~~~
## 十、圓錐的體積公式(底面積 * 高 / 3)

~~~
var radius = 5,
height = 10;
var area = Math.PI * Math.pow(radius, 2);
var coneBulk = area * height / 3;
~~~
圓錐的側面積公式


剖開來就是計算圓弧的面積了
~~~
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布局