html5中三角函数,三角函数之箭头绘制－HTML应用

由于项目中需要采用html5绘制箭头，查阅所有的html5方法，发现只有lineTo方法，所以决定采用lineTo画线方法来绘制一条直线的箭头

箭头”–>”:是由一条直线向左右各旋转一个相同的角度就形成了箭头，这里我们需要计算直线旋转后的坐标，所以我们需要用到三角函数［三角函数：两条关联的直线(a,b)所形成的直角三角形中a与b的关系］如图所示

1 三角函数简介：

绘制直角三角形如图所示 a^2 +b^2 =c^2;

从图中我们可以看见角∠ACB,角∠ABC,角∠CAB

针对角A 我们来求三角函数的值

sin(A) = a/c

cos(A) = b/c

tan(A) = a/b;

cot(A) = b/a;

从上面的公式中我们可以看出 以上四个三角函数 相互的之间的关系为

tan =1/cot;

sin^2(A)+cos^2(A)=1;

sin(A) = [1-cos^2(A)]开方;

2 javascript中三角函数的方法简介?

Math.E 自然对数的底(为常数)2.718

Math.LN1010的自然对数2.302

Math.LN22的自然对数0.693

Math.PI圆周率3.1415

Math.SQRT1_21/2的平方根0.707

Math.SQRT22的平方根1.414

Math.sqrt(x)X的平方根更X的值有关

Math.pow(x, n)返回x的n次方的数值参数为x和n

Math.log(n)返回n的自然对数参数为n

Math.exp(n)返回e的n次方的数值参数为n

三角函数

Math.cos(x)X的余弦函数

Math.sin(x)X的正弦函数

Math.tan(x)X的正切函数

Math.acos(y)X的反余弦函数

Math.asin(y)X的反正弦函数

Math.atan(y)X的反正切函数

这里注意：参数x和以及反函数的返回数值的单位都为弧度(比如 PI弧度=180度)

舍入函数和随机数字

Math.random()产生从0到1的随机数

Math.round(x)取最接近整数x的数值

Math.floor(x)取最接近整数x并且比x小的数值

Math.ceil(x)取最接近整数x并且比x大的数值

Math.min(a, b, c)返回参数列表中最小的数值

Math.max(a, b, c)返回参数列表中最大的数值

3 绘制圆 根据直角的关系 介绍如何计算坐标,如何确定箭头

根据上图的圆和三角函数知识,

首先我们绘制一条直线，然后将html5中对象的坐标系统(0，0)旋转的同绘制的直线在同一X轴上

如下图代码：

< !DOCTYPE html >

< html>

< head>

< script type="text/javascript" >

function drawLineAndArrow(divId,ox,oy,startX,startY,endX,endY)

{

//参数:divId的 id ox,oy原点坐标 startX,startY开始坐标 endX,endY线终止坐标

var start= new Array(startX,startY);

var end= new Array(endX,endY);

var objId= document.getElementById(divId);

if(objId== null)return false;

var objCanvas= objId.getContext(‘2d’);

//画线

objCanvas.beginPath();

objCanvas.translate(ox,oy,0); //坐标源点

objCanvas.moveTo(start[0],start[1]);

objCanvas.lineTo(end[0],end[1]);

objCanvas.fill();

objCanvas.stroke();

//画箭头

objCanvas.translate(end[0],end[1]);

//我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号

var t=(end[0]-start[0])/(end[1]-start[1]);

t=Math.atan(atg);

if(end[1]-start[1] >= 0){

objCanvas.rotate(-t);

}else{

objCanvas.rotate(Math.PI-t);

}

objCanvas.lineTo(-5,-10);

objCanvas.lineTo(0,-5);

objCanvas.lineTo(5,-10);

objCanvas.lineTo(0,0);

objCanvas.fill(); //箭头是个封闭图形

objCanvas.closePath();

}

drawLineAndArrow(“showDrawPic”,0,0,0,0,300,100);

< /script>

< /head>

< body>

< canvas id="showDrawPic" width="900" height="800">

< /body>

< /html>