Intro to Canva
-
Upload
dreambreeze -
Category
Technology
-
view
667 -
download
0
Transcript of Intro to Canva
HTML5 Canvas Exploring
On the Menu…
1. Introducing HTML5 Canvas
2. Drawing on the Canvas
3. Simple Compositing
4. Canvas Transformations
5. Colours and Text
6. Simple Animations
Understanding HTML5 Canvas
Canvas is an IMMEDIATE MODE bitmapped area of browser screen that can be manipulated by you through JavaScript.
Immediate Mode
› Canvas completely redraws bitmapped screen on every frame using Canvas API› Flash, Silverlight, SVG use retained mode
The Canvas API includes a 2D context allowing you to draw shapes, render text, and display images onto the defined area of browser screen.
2D Context
› 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, timer
intervals, events, objects, classes, sounds… etc
Understanding HTML5 Canvas
Transformations 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 space
Result:There is then only one object on the Canvas: the context
The DOM cannot access individual graphical elements created on Canvas
Canvas Effects
Browser Support
function canvasSupport () {return !!document.createElement('testcanvas').getContext;
}
function canvasApp() {if (!canvasSupport) {
return;}
}
Dummy Canvas Creation – by Mark Pilgrim (http://diveintohtml5.org)
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 transparent
Utilizing Style functions:› fillStyle
› Takes a hexidecimal colour code› strokeStyle
› Takes a hexidecimal colour code
Text› fillText( message, posX, posY)
› Takes a hexidecimal colour code› strokeStyle
› Takes a hexidecimal colour code
Simple LinesPaths can be used to draw any shape on Canvas› Paths are simply lists of points for lines to be drawn in-between
Path 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
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, Square
› 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
Arcs and curves can be drawn on the canvas in four waysAn arc can be a circle or any part of a circle
Clipping
› 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
Clipping allows masking of Canvas areas so anything drawn only appears in clipped areas
Compositing
› 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
Compositing is the control of transparency and layering of objects. This is controlled by globalAlpha and globalCompositeOperation
Canvas Rotations
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
Reference:An object is said to be at 0 angle rotation when it is facing to the left.
Transformations are applied to shapes and paths drawn after the setTransform() and rotate() or other transformation function is called.
Canvas RotationsThe point of origin to the center of our shape must be translated to rotate it
around 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);
Images on Canvas
› Image object can be defined through HTML› <img src=“zelda.png” id=“zelda”>
› 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);
Reference:Canvas Image API can load in image data and apply directly to canvasImage data can be cut and sized to desired portions
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 animation
sourceX = integer(current_frame_index modulo the_number_columns_in_the_tilesheet) * tile_width
HTML Sprite Animation
› Creating a Tile Sheet› Calculate Y to give us an integer using the result of the current tile
divided by the number of tiles in the animation
› Creating a Timer Loop› A simple loop to call the move function once every 150 millisecondsfunction startLoop() {
var intervalID = setInterval(moveZeldaRight, 150);}
› Changing the Image› To change the image being displayed, we have to set the
current frame index to the desired tile
sourceY = integer(current_frame_index divided by columns_in_the_tilesheet) *tile_height
HTML Sprite Animation
› Changing the Image› Loop 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 every
iterationcontext.drawImage(zelda, sourceX, sourceY+60,30,30,x,y,30,30);
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 updating
graphics on Canvas for each frame› Transformations to Canvas to allow the rocket to rotate
1. Save current state to stack2. Transform rocket3. Restore saved state
› Variables in question:› Rotation› Position X› Position Y
Rocket Science
› Rocket can face one direction and move in a different direction› 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
› Control the rocket with the keyboard› Respond appropriately with acceleration or rotation per key
press.
facingX = Math.cos(angleInRadians);movingX = movingX + thrustAcceleration * facingX;
Thank you!