Shulou(Shulou.com)06/02 Report--

This article mainly introduces "JavaScript support does not support trigonometric functions". In daily operation, I believe many people have doubts about JavaScript support does not support trigonometric functions. Xiaobian consulted all kinds of information and sorted out simple and easy operation methods. I hope to help you answer the doubts about "JavaScript support does not support trigonometric functions"! Next, please follow the small series to learn together!

JavaScript supports trigonometric functions. The trigonometric functions in js are static methods and must be called using Math, so the syntax is "Math.sin(x),""Math.cos(x),""Math.tan(x)."

Operating environment of this tutorial: Windows 7 system, Javascript version 1.8.5, Dell G3 computer.

JavaScript supports trigonometric functions. They are: Math.sin(x), Math.cos(x), Math.tan(x).

Let's take a look at JavaScript support for trigonometry.

First of all, let's review the basic knowledge of trigonometric functions we learned in high school. I'll introduce a few simple ones here. The first is the sin function. The second is the cos function. The third is the tan function. The fourth is the atan function. The sin function is actually the value obtained by comparing the opposite sides of a triangle with the hypotenuse. Let's look at an image.

So cos30=x/r, cos function is the edge than the hypotenuse, tan30=y/x, tan function is the opposite edge than the edge, through these formulas, we can easily get the value of this trigonometric function, and then use these values to do interesting things!

Then we in javascript inside the trigonometric function and mathematics trigonometric function actually have a little difference, the first is written on the hair is not the same, js inside the trigonometric function are static methods, must use Math to call, three functions are Math.sin(), Math.cos(), Math.tan().

This is easy to understand, then the second difference is that the trigonometric function in mathematics uses the accepted parameter is angle, but in js the accepted parameter is radian, some friends may be dizzy, radian angle what??? Don't worry, here is a brief introduction, let's first look at a circle

If the length of a side of a circle is equal to the radius of the circle, then the side represents a radian, just like the red part in the figure represents a radian. This is actually just a concept. What we really want to use is that we want to convert the angle into radians. Here, we directly apply the mathematical formula 1 Angle =π/180, so 10 angles are equal to 10*π/180.

Then we need to use Math.sin() of js to calculate what the angle of 30 degrees is equal to, so we should write Math.sin(30*Math.PI/180), where note that π in js is Math.PI. I believe that you see here on js trigonometric function must have some understanding of it, then let's look at a practical small example of it.

First, there is a need. There's a little ball on the page, and I want my mouse to move there when I put it on the page. Small ball will move to the corresponding position, note that not moved to the mouse location, but the corresponding position, here is not good hair URL, hair a picture to see it.

The red ball represents a muzzle. The blue ball represents the position of the mouse. When the mouse is placed in different positions on the page, the red ball will move to the corresponding angle. However, we also see that there is an r, indicating the range of the plane. The range that the red ball can move is actually the radius of a circle. If the r is larger, the range of the ball will be larger!! (If you don't understand, copy the following example and run it first.)

The realization of this function requires us to use trigonometry to complete, detect the position of the mouse and is in the range of 360 degrees to detect, here you need to calculate the distance from the left side of the red ball through the angle value and the distance above the value, and then assign to the ball on the wide to it!! Let's look at another picture.

Below is the code of this case, interested friends can have a look!

/** *************/Document#box{width:30px;height:30px;background:red;position:absolute;top:400px;left:400px;border-radius:15px;}

var obox = document.getElementById('box');var r=50;_document.onmousemove=function(ev){var oev = ev||event;var x = Math.abs(oev.clientX-obox.offsetLeft);var y = Math.abs(oev.clientY-obox.offsetTop);var angle = Math.atan(y/x);var cx=0;var cy=0;if(oev.clientX>=obox.offsetLeft && oev.clientY

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.