How to use JS to realize the parabolic trajectory motion of a small ball

This article mainly introduces two methods of realizing the parabolic trajectory motion of a JS ball. It analyzes the relevant calculation and graphics drawing operation skills of javascript to realize the parabolic trajectory of a small ball in the form of examples. Friends in need can refer to the following

The examples in this article describe two methods of realizing the parabolic trajectory motion of the JS ball. Share it with everyone for your reference, the details are as follows:

The general idea of implementing the parabolic trajectory motion of the ball in js:

1. Use thesetInterval()method to perform interval Refresh, update the position of the ball to achieve dynamic effects
2. Draw the ball and the sports area. The sports area can be vertically centered through flex layout
3. Use the physical formulaS(y)=1/ 2*g*t*t,S(x)=V(x)tto calculate the path
is now determinedV(x)=4m/s, The refresh interval is set to 0.1s. Originally, the conversion between px and meters is different for different sizes. In this example, a 17-inch monitor is used, which is about 1px=0.4mm. However, the browser is too small, so it can only simulate a parabolic trajectory. In this example, the distance between px and meters is reduced to 100 times.

The first method: draw the ball through border-radius

Idea: useborder-radius: 50%Draw the ball, set relative to the ball, calculate the current position of the ball each time, and assign it to top and left. When calculating the motion trajectory, the variable can be incremented to calculate the number ofsetIntervalcalls, each time is 0.1s, so that the total time can be calculated. The code is as follows:

      
  
 此时水平速度为：4演示 
 
   

Second type: canvas in h5 draws the ball and sports area

Idea: Use canvas to draw the ball, Since the ball cannot move through top and left, it needs to clear the canvas with clearRect every time it is called, and then draw the ball at the calculated position. The code is as follows:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement a web version of the calculator in JS

How to remove the # sign in the url in Angular2 ( Detailed tutorial)

How to use the mobile component library in Vue.js (detailed tutorial)

The above is the detailed content of How to use JS to realize the parabolic trajectory motion of a small ball. For more information, please follow other related articles on the PHP Chinese website!