【Canvas技法】在Canvas绘图中常用的数学知识

一.弧度与角度的相互转化

JS的函数计算只接受弧度，而角度便于精确控制，于是二者常需要相互转化，公式为：

弧度=角度/180*PI；

角度=弧度/PI*180;

以下函数提供了角度到弧度的转化：

function getRadian(degree){
    return degree/180*Math.PI;
}

 

二.弧长到弧度的转化

在用贝塞尔曲线设置圆弧上的倒角时需要用到弧长到弧度的转化以找到精确的点，具体公式是：

弧度=弧长/半径；

 

三.角度/弧度的起止位置

角度/弧度以x正轴为起始点，顺时针为加，逆时针为减。这个在画圆弧时常用。 

 

四.两点间的距离

两点间距离=开平方（两点间横坐标差值的平方+两点间纵坐标差值的平方）

 以下函数用于计算两点间距离：

function getDistance(p1,p2){
    return Math.sqrt((p1.x-p2.x)*(p1.x-p2.x)+(p1.y-p2.y)*(p1.y-p2.y));
}

 

五.知道两点相对位置求未知点坐标

如果知道已知点和未知点坐标差值，则如下计算：

未知点横坐标=已知点横坐标+两点横坐标差值

未知点纵坐标=已知点纵坐标+两点间纵坐标差值

如果不清楚已知点和未知点坐标差值，但知道两点间距离和角度，则如下计算：

未知点横坐标=已知点横坐标+两点间距离*角度的余弦值

未知点纵坐标=已知点纵坐标+两点间距离*角度的正弦值

 以下函数提供已知两点间距离和角度，求新点坐标的方法：

function createPt3(base,radius,theta){
    var retval={};
    retval.x=base.x+radius*Math.cos(theta);
    retval.y=base.y+radius*Math.sin(theta);
    return retval;
}

明显，函数内部还是利用了坐标差值加减，但一般轮廓上点很多，每次都要写一遍代码庞大，写成函数就简洁多了。 

 

六.正弦定理和余弦定理

正弦定理：三角形中三个角的正弦值与对边的比都相等。

余弦定理：三角形中一个角的余弦值等于两邻边的平方和减去对边的平方除以两邻边乘积的两倍。

这两个定理用得非常广泛，越是复杂而精确的图越用的多。

 

<待续>