The circular motion of canvas learning, and the circle of canvas Learning
Html section
... <Body> <canvas id = "myCanvas" width = "400" height = "400"> </canvas> <! -- Add a control button to the animation --> <div> <button id = "startAnimation"> Start </button> <button id = "stopAnimation"> Stop </button> </div> ......
Circular Motion
Related Knowledge: trigonometric function
Method: place the shape on the circumference and the angle is 0 radian on the right hand side. In each animation loop, you only need to increase the angle of the Shape on the circumference, the shape can be moved along the circumference.
Problems to be Solved:
How to calculate the (x, y) coordinate values in the circular shape
Solution: You need to know the length of the adjacent side and the opposite side of the triangle, representing the position of x and y respectively.
Var angle = 45; var adjRatio = Math. cos (angle * (Math. PI/180); // cosine-oblique edge-adjacent edge var oppRatio = Math. sin (angle * (Math. PI/180); // sine-Right side-diagonal side var radius = 50; var x = radius * adjRatio; var y = radius * oppRatio;
Location: defines the shape class and adds attributes to it,
Var shape = function (x, y, canvasWidth, canvasHeight) {this. x = x; this. y = y; this. width = width; this. height = height; this. radius = Math. random () * 30; // between 0 and ~ Random radius between 30: this. angle = 0; // The starting angle value}
Calculates the values of x and y corresponding to the shape of the current angle on the circumference,
Circle passed radius Definition
Note: The point (x, y) defined in the shape object references the center of the circumference-the point in which the shape rotates around it, not the starting point.
Var x = temshape. x + (temshape. radius * Math. cos (temshape. angle * (Math. PI/180); var y = temshape. y + (temshape. radius * Math. sin (temshape. angle * (Math. PI/180); temshape. angle + = 5; // increase the rotation angle if (temshape. angle & gt; 360) {temshape. angle = 0 ;}
Add the new x and y variables to fillRect.
Context. fillRect (x, y, temshape. width, temshape. height) // draw a rectangle
--------------------------- Complete code --------------------------------
<Script> function draw1 (id) {var myCanvas =$ ('# myCanvas'); var context = myCanvas. get (0 ). getContext ('2d '); var canvasWidth = myCanvas. width (); var canvasHeight = myCanvas. height (); var startButton = $ ('# startAnimation'); var stopButton = $ ('# stopAnimation'); var playAnimation = true; startButton. hide (); startButton. click (function () {$ (this ). hide (); stopButton. show (); playAnimation = true; animate ();}) StopButton. click (function () {$ (this ). hide (); startButton. show (); playAnimation = false;}) var shape = function (x, y, canvasWidth, canvasHeight) {this. x = x; this. y = y; this. width = width; this. height = height; this. radius = Math. random () * 30; // between 0 and ~ Random radius between 30 this. angle = 0; // The starting angle value} var shapes = new Array (); for (var I = 0; I <10; I ++) {var x = Math. random () * 250; var y = Math. random () * 250; var width = height = Math. random () * 50; shapes. push (new shape (x, y, width, height);} function animate () {context. clearRect (0, 0, canvasWidth, canvasHeight); // erase var shapesLength = shapes. length; for (var I = 0; I <shapesLength; I ++) {var temshape = shapes [I]; var x = temshape. x + (temshape. radius * Math. cos (temshape. angle * (Math. PI/180); var y = temshape. y + (temshape. radius * Math. sin (temshape. angle * (Math. PI/180); temshape. angle + = 5; if (temshape. angle & gt; 360) {temshape. angle = 0;} context. fillRect (x, y, temshape. width, temshape. height) // draw a rectangle}; if (playAnimation) {setTimeout (animate, 33) ;}} animate () ;}draw1 ('# myCanvas'); </script>
, And the rectangle performs circular motion.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
