153x Filetype PPTX File size 0.24 MB Source: www.cs.sjsu.edu
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
no reviews yet
Please Login to review.