Canvas learning-making animation and canvas learning Animation
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> ......
Create an animation
1. Create an animation Loop
It is called a loop because it occurs repeatedly.
Three elements of an animation cycle:
1) Update the object to be drawn (such as moving the object location)
2) Clear the canvas
3) redraw objects on the canvas.
Note: Do not draw objects before clearing objects; otherwise, no objects are visible!
Instance:
2. Update, clear, and draw
A simple example: create a simple animation to make a square move 1 pixel to the right of each frame, and click the stop button to stop moving the square.
<Script> function draw1 (id) {var myCanvas =$ ('# myCanvas'); var context = myCanvas. get (0 ). getContext ("2d"); var canvasWidth = myCanvas. width (); var canvasHeight = myCanvas. height (); // Add the "Start" and "stop" control buttons to the animation. var playAnimation = true; var startButton = $ ('# startAnimation '); var stopButton = $ ('# stopAnimation'); startButton. hide (); startButton. click (function () {$ (this ). hide (); stopButton. show (); playAnima Tion = true; animate () ;}) stopButton. click (function () {$ (this ). hide (); startButton. show (); playAnimation = false;}) var x = 0; // Save the X position of the current square. // The animate function creates a loop. You can call this function outside the function to start the loop function animate () {// If the playAnimation variable is saved as false, then the animation loop stops running if (playAnimation) {x ++; context. clearRect (0, 0, canvasWidth, canvasHeight); context. fillRect (x, 10); setTimeout (animate, 33) ;}} animate () ;}draw1 ('mycanvas '); </script>
3. Remember the shape to be drawn
Main Problem: accurately remembers the content and position of the object to be drawn
Method: object and array
Steps:
1) no matter how many shapes there are, first consider how to store the position values of each shape.
Solution: the location values required for each shape are x and y. Create a shape object by creating a JS class, as shown below:
var shape = function(x,y){this.x = x; this.y = y;};
2). How to draw each shape without copying the code.
Solution: Add a shape object to the array (push: No need to know the sequence number of the last element of the array, and push automatically adds the object to the end of the array)
var shapes = new array();shapes.push(new shape(50,50));shapes.push(new shape(50,150));shapes.push(new shape(50,250));
Now we get a set of shapes. Each shape has its own x and y values. These values exist in shapes.
3). extract these shapes from the array and update their positions (to make them animated), and then draw these shapes.
Solution: Set A for loop inside the animation
Function animate () {context. clearRect (0, 0, canvasWidth, canvasHeight); var shapesLength = shapes. length; for (var I = 0; I <shapesLength; I ++) {var temshape = shapes [I]; temshape. x ++; // each time x moves 1 context to the right. fillRect (temshape. x, temshape. y, 10, 10) // draw a rectangle}; if (playAnimation) {setTimeout (animate, 33 );}}
4) randomly generate shapes
Change the shape class to define the width and height of the shape.
var shape = function(x,y,width,height){ this.x = x; this.y = y; this.width = width; this.height = height; }
Then select the start position and size randomly for each shape.
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));}
Change the call of the fillrect method, while taking the new width and height
context.fillRect(temshape.x,temshape.y,temshape.width,temshape.height);
5). Change the direction
Train of Thought: increase or decrease the values of x and y
Solution: Modify temshape. x ++
For example, temshape. x + = 2;
Temshape. y ++;
In this way, each animation loop will be directed to + 2, down + 1, resulting in moving to the right diagonal line.
Or, in an animation loop, set x and y to random values,
Temshape. x = Math. random () * 4-2;
Temshape. y = Math. random () * 4-2;
In this way, there will be no rule for the animation movement.
----------------------- Complete code -----------------------
Run the following code: random position, random rectangular Animation
<Script> function draw1 (id) {var myCanvas =$ ('# myCanvas'); var context = myCanvas. get (0 ). getContext ("2d"); var canvasWidth = myCanvas. width (); var canvasHeight = myCanvas. height (); var playAnimation = true; var startButton = $ ('# startAnimation'); var stopButton = $ ('# stopAnimation'); 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, width, height) {this. x = x; this. y = y; this. width = width; this. height = height;} 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); var shapesLength = shapes. length; for (var I = 0; I <shapesLength; I ++) {var temshape = shapes [I]; // In an animation loop, convert x, y is set to a random value, temshape. x = Math. random () * 200-2; temshape. y = Math. random () * 200-2; context. fillRect (temshape. x, temshape. y, temshape. width, temshape. height) }; if (playAnimation) {setTimeout (animate, 33) ;}} animate () ;}draw1 ('mycanvas '); </script>
The above are study notes. If you make a mistake, please point it out. Thank you very much!
Document: HTML5 CANVAS basic tutorial
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
