intro to canva

Download Intro to Canva

Post on 10-May-2015




0 download

Embed Size (px)


  • 1.HTML5 Canvas Exploring

2. On the Menu1. Introducing HTML5 Canvas2. Drawing on the Canvas3. Simple Compositing4. Canvas Transformations5. Colours and Text6. Simple Animations 3. Understanding HTML5 CanvasImmediate ModeCanvas is an IMMEDIATE MODE bitmapped area of browser screen that canbe manipulated by you through JavaScript. Canvas completely redraws bitmapped screen on every frame using Canvas API Flash, Silverlight, SVG use retained mode2D ContextThe Canvas API includes a 2D context allowing you to draw shapes, rendertext, and display images onto the defined area of browser screen. The 2D context is a display API used to render the Canvas graphics The JavaScript applied to this API allows for keyboard and mouse inputs, timerintervals, events, objects, classes, sounds etc 4. Understanding HTML5 CanvasCanvas EffectsTransformations are applied to the canvas (with exceptions)Objects can be drawn onto the surface discretely, but once on the canvas,they are a single collection of pixels in a single spaceResult: There is then only one object on the Canvas: the contextThe DOM cannot access individual graphical elements created on CanvasBrowser SupportDummy Canvas Creation by Mark Pilgrim ( canvasSupport () {return !!document.createElement(testcanvas).getContext;}function canvasApp() { if (!canvasSupport) { return; }} 5. Simple ObjectsBasic objects can be placed on the canvas in three ways: FillRect(posX, posY, width, height); Draws a filled rectangle StrokeRect(posX, posY, width, height); Draws a rectangle outline ClearRect(posX, posY, width, height); Clears the specified area making it fully transparentUtilizing Style functions: fillStyle Takes a hexidecimal colour code strokeStyle Takes a hexidecimal colour codeText fillText( message, posX, posY) Takes a hexidecimal colour code strokeStyle Takes a hexidecimal colour code 6. Simple LinesPaths can be used to draw any shape on Canvas Paths are simply lists of points for lines to be drawn in-betweenPath drawing beginPath() Function call to start a path moveTo(posX, posY) Defines a point at position (x, y) lineTo(posX, posY) Creates a subpath between current point and position (x, y) stroke() Draws the line (stroke) on the path closePath() Function call to end a path 7. Simple LinesUtilizing Style functions: strokeStyle Takes a hexadecimal colour code lineWidth Defines width of line to be drawn lineJoin Bevel, Round, Miter (default edge drawn at the join) lineCap Butt, Round, SquareArcs and curves can be drawn on the canvas in four waysAn arc can be a circle or any part of a circle arc(posX, posY, radius, startAngle, endAngle, anticlockwise) Draws a line with given variables (angles are in radians) arcTo(x1, y1, x2, y2, radius) Draws a straight line to x1, y1, then an arc to x2, y2 with the radius 8. ClippingClipping allows masking of Canvas areas so anything drawn only appears inclipped areas Save() and Restore() Drawing on the Canvas makes use of a stack of drawing states A state stores Canvas data of elements drawn Transformations and clipping regions use data stored in states Save() Pushes the current state to the stack Restore() Restores the last state saved from the stack to the Canvas Note: current paths and current bitmaps are not part of saved states 9. CompositingCompositing is the control of transparency and layering of objects. This iscontrolled by globalAlpha and globalCompositeOperation globalAlpha Defaults to 1 (completely opaque) Set before an object is drawn to Canvas globalCompositeOperation copy Where overlap, display source destination-atop Where overlap, display destination over source, transparent elsewhere destination-in Where overlap, show destination in the source, transparent elsewhere destination-out Where overlap, show destination if opaque and source transparent, transparent elsewhere destination-over Where overlap, show destination over source, source elsewhere 10. Canvas RotationsReference:An object is said to be at 0 angle rotation when it is facing to the left.Rotating the canvas steps: Set the current Canvas transformation to the identity matrix context.setTransform(1,0,0,1,0,0);Convert rotation angle to radians: Canvas uses radians to specify its transformations.Only objects drawn AFTER context.rotate() are affected Canvas uses radians to specify its transformations.In the absence of a defined origin for rotation Transformations are applied to shapes and paths drawn after thesetTransform() and rotate() or other transformation function is called. 11. Canvas RotationsThe point of origin to the center of our shape must be translated to rotate itaround its own center What about rotating about the origin? Change the origin of the canvas to be the centre of the square context.translate(x+.5*width, y+.5*height); Draw the object starting with the correct upper-left coordinates context.fillRect(-.5*width,-.5*height , width, height); 12. Images on CanvasReference:Canvas Image API can load in image data and apply directly to canvasImage data can be cut and sized to desired portions Image object can be defined through HTML Or Javascript var zelda = new Image(); zelda.src = zelda.png; Displaying an image drawImage(image, posX, poxY); drawImage(image, posX, posY, scaleW, scaleH); drawImage(image, sourceX, sourceY, sourceW, sourceH, posX, posY, scaleW, scaleH); 13. HTML Sprite Animation Creating a Tile Sheet One method of displaying multiple images in succession for an animation is to use a images in a grid and flip between each tile Create an animation array to hold the tiles The 2-dimensional array begins at 0 Store the tile IDs to make Zelda walk and an index to track which tile is displayedvar animationFrames = [0,1,2,3,4]; Calculate X to give us an integer using the remainder of the current tile divided by the number of tiles in the animationsourceX = integer(current_frame_index modulothe_number_columns_in_the_tilesheet) * tile_width 14. HTML Sprite Animation Creating a Tile Sheet Calculate Y to give us an integer using the result of the current tiledivided by the number of tiles in the animationsourceY = integer(current_frame_index divided bycolumns_in_the_tilesheet) *tile_height Creating a Timer Loop A simple loop to call the move function once every 150 millisecondsfunction startLoop() {var intervalID = setInterval(moveZeldaRight, 150);} Changing the ImageTo change the image being displayed, we have to set the current frame index to the desired tile 15. HTML Sprite Animation Changing the ImageLoop through the tiles accesses all frames in the animation and draw each tile with each iterationframeIndex++;if (frameIndex == animationFrames.length) {frameIndex = 0;} Moving the Image Set the dx and dy variables during drawing to increase at everyiterationcontext.drawImage(zelda, sourceX, sourceY+60,30,30,x,y,30,30); 16. Rocket Science Rocket will rotate when left and right arrows are pressed Rocket will accelerate when player presses up Animations are about creating intervals and updatinggraphics on Canvas for each frame Transformations to Canvas to allow the rocket to rotate1. Save current state to stack2. Transform rocket3. Restore saved state Variables in question:RotationPosition XPosition Y 17. Rocket Science Rocket can face one direction and move in a differentdirection Get rotation value based on key presses Determine X and Y of rocket direction for throttle using Math.cos and Math.sin Get acceleration value based on up key press Use acceleration and direction to increase speed in X and Y directions facingX = Math.cos(angleInRadians); movingX = movingX + thrustAcceleration * facingX; Control the rocket with the keyboard Respond appropriately with acceleration or rotationper key press. 18. Thank you!