数学之美

前端⼯工程师的数学世界

先来玩个例⼦子

怎么做到的？



!

答案后面会揭晓

http://qgy18.imququ.com/bobo/edit.html

坐标系

x

⽹网页上的直角坐标系:



!

1）双重坐标系（屏幕、页面）

 2）三维直角坐标（left, top, z-index）

 3）坐标值与相对位置（absolute、relative）

 4）参考点（元素左上角）

y

直角坐标系



直角坐标系的作用



1) ⽔水平垂直居中⼀一个固定宽⾼高的区块

 2) 判断两个绝对定位的div是否重叠

 3) 碰撞检测



div1 div1



div2



div1 参考点的平移

直角坐标系

碰撞检测

直角坐标系

直角坐标系的局限性

匀速圆周运动（旋转）

x^2 + y^2 = r^2 正确吗?

参数⽅方程： 

 x = r cos a

 y = r sin a

其他坐标系

CSS3:

 transition

 transform-rotate

 transform-origin

极坐标⽅方程：

 r(Θ)=a

直角与非直角坐标系

圆的三种数学表达

代数⽅方程：x^2 + y^2 = r^2 参数⽅方程：



x = r cos a

 y = r sin a

极坐标：r(Θ)=a 思考：

代数模型

求点到线段（多边形）的距离

百度地图使⽤用该模型!

思路：



!

1) 先求斜率，然后将斜截式变换为标准式，用上面的公式计算距离



!

2) 线路中的某段道路可能是⽔水平或垂直的，即该线段的斜率为0或者为1，

 此时计算距离需用特殊的⽅方程

向量模型



求点到线段的距离

C



Aθ



  AB × AC = ?

B



D



初中物理告诉我们——!

!

向量AB和AC的合⼒力矩的⼤大⼩小即AB与AC在垂直⽅方向上分量的乘积即：!



AB × AC = AB • AC • sinθ

向量⽅方程



根据平⾏行四边形面积与底边求⾼高



AB × AC CD =

AC



d=



(x0 y1)2 + (x1y0 )2 x12 + y12



向量叉乘的计算公式



[x0 , y0 ]×[x1, y1] = [x0 y1,−x1 y0 ]

向量⽅方程



代数法：



向量法：



1) 计算量⼤大

 2) 步骤多

 3) 需要考虑特殊情况，如 0和⽆无穷⼤大

 4) 开⽅方需要考虑符号

 5）⽆无直观物理意义



1) 计算量⼀一般不⼤大

 2) 步骤少

 3) 不需要考虑特殊情况

 4) 不需要考虑符号

 5）有直观物理意义

三角函数

哪些情形下考虑使用三角函数



!

1. 周期规律

 2. 连续

 3. 正负符号（消除开根号）

 4. （椭）圆周有关的

 5. 向量

神奇的“抖图”

基本原理：

原图



B! ! !

A1 A2

! 效果区域 平移椭! 圆中⼼心，周期旋转



平面上的点插值

抖图具体操作



2.找出区域椭圆 的中⼼心点 A1



1.设置要抖动 的椭圆形区域

5.在A2运动过程中，以 椭圆区域边界的点B为 参考点，将A1B的像素

点映射到A2B上



3.对椭圆中⼼心点 A1进⾏行⼀一个平移，

得到中⼼心点A2

4.以A1为中⼼心， 对A2做⼀一个椭圆周

运动

抖图具体操作

B

我是⼀一张图片

代数⽅方法 B

C1 C2

ab A1 A2

算法概要：对椭圆内部的每⼀一个像素点，求出变换后的坐标

 根据代数的⽅方法即上图的已知c1，求c2

 因为A1、A2已知，可以先求a角，再通过a角求出B点，根据A2B求出b角

 因为满⾜足Bc1:BA1 = Bc2:BA2，因此可以求出c2

代数⽅方法的特点

优点

 不重复，不遗漏计算所有的点



缺点



1. 求角需要计算反正切

 2. 计算中需要开平⽅方

 3. 反正切有⽆无穷⼤大，需要特殊处理

 4. 每计算⼀一个像素点，需要重复计算角度（该角度很 可能之前已经算过）

向量⽅方法

B

c1 c2

A1 A2



扇形扫描



算法概要：对椭圆以中⼼心A1为圆⼼心进⾏行⼀一个0~360度的扇形扫描

 对每根“向量轴”A1B，求出对应的向量A1A2和向量A2B

 对A2B上的每⼀一个像素点c2，求出原始向量轴A1B上的对应像素点

 c1，将c1所在的像素copy到c2位置

向量⽅方法的特点

优点



向量计算不需要求反正切，不重复计算角度

 没有开平⽅方问题

 没有正负号问题

 加法和乘法运算取代复杂运算



缺点



重复计算了⼀一些像素点

计算耗时对比



代数







代数



向量



0 PC浏览器



向量

Android浏览器

概率、逻辑与证明⽅方法

硬币问题 or ⼀一种抽奖游戏

想象你⼿手里有5个硬币，每个硬币有正反面，求：

 将这5个银币随机抛⼀一次，有3个或3个以上正面朝上的概率

常规与非常规解法？

 真的只是数学问题？

 忘记公式怎么解？

 解法过程中的思考和优化？

排列组合解法



排列组合公式：



C53



+ C54 25



+ C55



=



1 2

穷举状态

0 - 反面， 1 - 正面

 00000（2） ~ 11111（2）= 0 ~ 31



求0~31这些数字转换成2进制数中超过两个 “1”的数字的个数

思维实验法

考虑情形A：5硬币中3个及以上正面朝上

 考虑情形B：5硬币中3个及以上反面朝上

 对于独立硬币来说，正面朝上和反面朝上概率均等，因此A和B相对于 所有情形的集合出现的概率相同

 又因为，显然对于5个硬币来说，B情形和A情形互斥，它们合起来概率 为1

 所以A、B的概率均为1/2

模拟事件法

用随机数模拟硬币的情况，随机模拟N次

 求出符合条件的次数，得到近似概率

 N越⼤大，得到的概率越接近于准确概率

解决问题的数学⽅方法



穷举



计算



模拟



思维



证明

逻辑证明



最后讲⼀一个与前端⽆无关的数学问题：



有理数的有理数次⽅方可以是⽆无理数，那么⽆无理 数的⽆无理数次⽅方可以是有理数吗？

 如果是，如何证明？



思维的⼒力量：不是所有的真理都必须亲眼所见



2 ( )2 2



( )!

"#





2$ 2 %&

谢谢

!

Q&A