HTML section
... <body><canvas id= "MyCanvas" width= "All" height= "></canvas><"!--add control buttons to the animation-->< div> <button id= "startanimation" >Start</button> <button id= "StopAnimation" >stop</button ></div>
Circular Motion
Related knowledge: Trigonometric functions
Method: Place the shape on the perimeter with an angle of 0 radians, which is on the right-hand side, and in each animation loop, simply increase the angle of the shape on the circumference to make the shape move along the circumference.
Issues that need to be addressed:
How to calculate the (x, y) coordinate value of a shape on a circle
Resolution: You need to know the length of the triangle's neighbors and sides, respectively, to represent the location of X, Y
var angle = 45;var Adjratio = Math.Cos (angle* (math.pi/180)); Cosine-hypotenuse-O-side var oppratio = Math.sin (angle* (math.pi/180)); Sine-to-edge-hypotenuse var radius = 50;var x = radius * Adjratio;var y = radius * oppratio;
Location: Defines the shape class and adds properties 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; A random radius between 0~30 this.angle = 0; The starting Angle value}Calculates the number of x, y values of the shape that is at the current angle on the circumference,
circumference defined by radius
Note: The point defined in the Shape object (x, Y) now refers to the center of the circumference---the point around which the shape rotates, 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 angle of rotation if (temshape.angle>360) {temshape.angle=0;}Add a new x, y variable to FillRect
Context.fillrect (X,y,temshape.width,temshape.height)//Draw Rectangle
---------------------------Full 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; A random radius between 0~30 this.angle = 0; Starting angle Value} var shapes = new Array (); for (var i = 0;i<10;i++) { & nbsp; 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>360) {temshape.angle=0; } context.fillrect (X,y,temshape.width,temshape.height)//Draw Rectangle}; if (playanimation) {setTimeout (animate,33);}} Animate ();} DRAW1 (' #myCanvas ');</script>
, the rectangle does the circular motion.
The circular motion of canvas learning
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
