jagomart
digital resources
picture1_Science Ppt 70643 | Cs174 151007


 153x       Filetype PPTX       File size 0.24 MB       Source: www.cs.sjsu.edu


File: Science Ppt 70643 | Cs174 151007
javascript animation animate objects on the html canvas use an animation loop to perform transformations translations move objects rotations rotate objects scaling grow and shrink objects computer science dept cs ...

icon picture PPTX Filetype Power Point PPTX | Posted on 30 Aug 2022 | 3 years ago
Partial capture of text on file.
                                           JavaScript Animation
          Animate objects on the HTML canvas.
          Use an animation loop to perform 
                 transformations:
                  translations: move objects
                  rotations: rotate objects
                  scaling: grow and shrink objects
                    Computer Science Dept.                      CS 174: Web Programming                                                  2
                    Fall 2015: October 7                                © R. Mak
                              Temporary Coordinate System
          Transformations are actually performed 
                 on the coordinate system.
          Draw the object in the 
                 transformed coordinate system.
          Common sequence:
                 1.     Create a temporary coordinate system
                        (save the current coordinate system).
                 2.     Draw the object.
                 3.     Restore the coordinate system.
                    Computer Science Dept.                      CS 174: Web Programming                                                  3
                    Fall 2015: October 7                                © R. Mak
                                        Scaling
       Grow or shrink an object by scaling the axes 
           of the coordinate system.
            Apply a multiplication factor to each axis.
       con1.drawImage(image, CANVAS_X, CANVAS_Y, 
                             IMAGE_W, IMAGE_H);
       con2.save(); Save the current coordinate system and begin a temporary system.
       con2.scale(1.2, 0.8);
       con2.drawImage(image, CANVAS_X, CANVAS_Y, 
                             IMAGE_W, IMAGE_H);
       con2.restore(); Restore the saved coordinate system.
                                                     animation/transform.html
             Computer Science Dept.      CS 174: Web Programming                       4
             Fall 2015: October 7             © R. Mak
                                                     Scaling, cont’d
                    Computer Science Dept.                      CS 174: Web Programming                                                  5
                    Fall 2015: October 7                                © R. Mak
                                                              Rotation
          Rotation is clockwise about the canvas origin.
                  Specify the rotation amount in radians.
                    con3.save();                                                            animation/transform.html
                    con3.rotate(Math.PI/8);
                    con3.drawImage(image, CANVAS_X, CANVAS_Y, 
                                          IMAGE_W, IMAGE_H);
                    con3.restore();
                    Computer Science Dept.                      CS 174: Web Programming                                                  6
                    Fall 2015: October 7                                © R. Mak
The words contained in this file might help you see if this file matches what you are looking for:

...Javascript animation animate objects on the html canvas use an loop to perform transformations translations move rotations rotate scaling grow and shrink computer science dept cs web programming fall october r mak temporary coordinate system are actually performed draw object in transformed common sequence create a save current restore or by axes of apply multiplication factor each axis con drawimage image x y w h begin scale saved transform cont d rotation is clockwise about origin specify amount radians math pi...

no reviews yet
Please Login to review.