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

Today, I would like to share with you the relevant knowledge about how to achieve circular motion animation in JavaScript. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. A circle moving in a circle

A circle with a radius of size starts from the center of the canvas (canvas.width/2,canvas.height/2) and moves along a circle. Write the following HTML code.

A circle moving around a circle.

Varcanvas=document.createElement ('canvas'); varctx=canvas.getContext (' 2d')

Document.body.appendChild (canvas)

Canvas.width=window.innerWidth

Canvas.height=window.innerHeight

Ctx.beginPath ()

Ctx.fillStyle='rgba (0,0,0,1)'

Ctx.fillRect (0, canvas.width, canvas.height); varangle=360;varpos= [canvas.width/2,canvas.height/2]; varsize=10;varspeed=1;varcurve=0.5;varcolor='rgba (69, 204, 255. 95)'; functiondraw ()

{varradians=angle*Math.PI/180

Pos [0] + = Math.cos (radians) * speed

Pos [1] + = Math.sin (radians) * speed

Angle+=curve

Ctx.strokeStyle=color

Ctx.beginPath ()

Ctx.arc (pos [0], pos [1], size,0,2*Math.PI)

Ctx.stroke ()

Window.requestAnimationFrame (draw)

}

Window.requestAnimationFrame (draw)

View Code

Open the html file containing this HTML code in the browser, and you can render the animation shown in figure 1 in the browser window.

Figure 1? A circle moving along a circle.

As can be seen from figure 1, the starting point (canvas.width/2,canvas.height/2) of the circle motion is located at the position of angle==360 °on the circle along which the motion is moving.

two。 Two circles moving around the circle

Place two circles in the canvas, both of which start at the center of the canvas (canvas.width/2,canvas.height/2). One circle moves along the circle from 45 degrees along the circumference, and the other circle moves along the circle from the circumference of the circle. Write the following HTML code.

A circle moving around a circle.

Varcanvas=document.createElement ('canvas'); varctx=canvas.getContext (' 2d')

Document.body.appendChild (canvas)

Canvas.width=window.innerWidth

Canvas.height=window.innerHeight

Ctx.beginPath ()

Ctx.fillStyle='rgba (0,0,0,1)'

Ctx.fillRect (0Jing 0, canvas.width, canvas.height); varangle1=45;varangle2=135;varpos1= [canvas.width/2,canvas.height/2]; varpos2= [canvas.width/2,canvas.height/2]; varsize=10;varspeed=1;varcurve=0.5;varcolor1='rgba (69pr. 204 and 255pr. 95)'; varcolor2='rgba (255pr. 212 and 50pr. 95)'; functiondraw ()

{varradians=angle1*Math.PI/180

Pos1 [0] + = Math.cos (radians) * speed

Pos1 [1] + = Math.sin (radians) * speed

Angle1+=curve

Radians=angle2*Math.PI/180

Pos2 [0] + = Math.cos (radians) * speed

Pos2 [1] + = Math.sin (radians) * speed

Angle2+=curve

Ctx.strokeStyle=color1

Ctx.beginPath ()

Ctx.arc (pos1 [0], pos1 [1], size,0,2*Math.PI)

Ctx.stroke ()

Ctx.strokeStyle=color2

Ctx.beginPath ()

Ctx.arc (pos2 [0], pos2 [1], size,0,2*Math.PI)

Ctx.stroke (); / / fade ()

Window.requestAnimationFrame (draw)

} functionfade ()

{

Ctx.beginPath ()

Ctx.fillStyle='rgba (0,0,0,.03)'

Ctx.fillRect (0pen 0, canvas.width, canvas.height)

}

Window.requestAnimationFrame (draw)

View Code

Open the html file containing this HTML code in the browser, and you can render the animation shown in figure 2 in the browser window.

These are all the contents of the article "how to achieve Circular Motion Animation in JavaScript". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.