53
7 – 9 PM CLASS WELCOME March 19, 2012

HTML5 Canvas

Embed Size (px)

DESCRIPTION

Slideshow presented for Skilfer.com HTML5 Canvas course

Citation preview

Page 1: HTML5 Canvas

7 – 9 PM CLASS

WELCOME

March 19, 2012

Page 2: HTML5 Canvas

HOST: APPNEXUS

THANK YOU

Page 3: HTML5 Canvas

INSTRUCTOR

ROBYN OVERSTREET

INTRODUCTION

Page 4: HTML5 Canvas

WHAT ISHTML5 CANVAS?

• HTML5 element, now part of HTML5 API

• Used for drawing and animating directly in HTML, with JavaScript scripting

• Originally developed by Apple for Dashboard widgets

Page 5: HTML5 Canvas

WHAT CAN IT DO?

• Dynamically draw shapes, images and text• Respond to user input – mouse, keyboard, touch, etc.• Animation without Flash• Create interactive charts and graphs

Page 6: HTML5 Canvas

CANVAS IN ACTION

• Rough GuidesKEXP Archive Sketchpad Wired Mind NYC Restaurant Health Ratings Map

Page 7: HTML5 Canvas

BROWSER SUPPORT

• Firefox•Chrome•Safari•IE 9

• See CanIUse.com for up-to-date support info

Page 8: HTML5 Canvas

2D DRAWING

Page 9: HTML5 Canvas

THE GRID

Page 10: HTML5 Canvas

SET-UP FOR DRAWING

var mycanvas = document.getElementById("the_canvas");

var context = mycanvas.getContext("2d");

grab the canvas element

set up a 2D context

Page 11: HTML5 Canvas

DRAWING A RECTANGLEcontext.fillStyle = "rgba(0, 204, 204, 1)";

context.fillRect(40,50,110,70);

Page 12: HTML5 Canvas

DRAWING LINES

1. Set start position

2. Set end position

3. Draw line between points

context.beginPath(); //set up to draw a pathcontext.moveTo(x,y); //move to the start positioncontext.lineTo(x,y); //set the end pointcontext.stroke(); //draw the line

Page 13: HTML5 Canvas

DRAWING CURVES

Start pointMoveTo(25,125)

Control point 1bezierCurveTo(100,25 ...

Control point 2...400,25...

Destination point...325,125);

Page 14: HTML5 Canvas

CODING CURVES

var controlPt1 = {x:110,y:30};var controlPt2 = {x:130,y:80};var startPt = {x:75,y:140};ctx.beginPath(); //prepare pathctx.moveTo(startPt.x,startPt.y);ctx.bezierCurveTo(

controlPt1.x,controlPt1.y,controlPt2.x,controlPt2.y,startPt.x,startPt.y

);ctx.stroke();

Page 15: HTML5 Canvas

DRAWING ARCS

Start angleStart angleStart angleStart angle

End angleEnd angleEnd angleEnd angle

0

1.5 * PI

PI

0.5 * PI

Center pointCenter pointCenter pointCenter point

Page 16: HTML5 Canvas

ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI*2, true);ctx.closePath();ctx.fill();

DRAWING ARCS & CIRCLES

• Circles are types of arcs • Angles are in radians (need to calculate

between degrees and radians)

Start angleStart angleStart angleStart angle End angleEnd angleEnd angleEnd angle

Page 17: HTML5 Canvas

TEXT

• Text is "drawn" to the canvascontext.fillText("Hello world", 10, 50);

• Style text in CSS syntax with .font property

• Get the dimensions of a text areatextObj = ctx.measureText(d);width = textObj.width;

Page 18: HTML5 Canvas

TRANSFORMATIONS

Page 19: HTML5 Canvas

TRANSFORMATIONS

• To change the orientation of one element on the canvas, you must shift the entire canvas

• Translate: move the canvas and its origin to a different point in the grid

• Rotate: rotate the canvas around the current origin

Page 20: HTML5 Canvas

TRANSLATE CONTEXT

Context moved.Context moved.The origin point The origin point now has a new now has a new

location.location.

Context moved.Context moved.The origin point The origin point now has a new now has a new

location.location.

Page 21: HTML5 Canvas

TRANSLATE & ROTATE

Translatetranslate(x, y)

Rotaterotate(angle)

Page 22: HTML5 Canvas

THE STATE STACK

State 2Fill Style: blackLine Style: blueScale: 50%

State 1Fill Style: redRotation: 45deg

save()

State 2

State 1

restore()

Page 23: HTML5 Canvas

SAVE & RESTOREctx.fillRect(0,0,150,150); //Draw with default settings ctx.save(); // Save the default state ctx.fillStyle = '#09F'; //Change the fill color ctx.fillRect(15,15,120,120); // Draw with new settingsctx.save(); //Save the current state

ctx.fillStyle = '#FFF'; //Change fill again ctx.fillRect(15,15,120,120); // Draw with new settings

ctx.restore(); //Restore to last saved state ctx.fillRect(45,45,60,60); //Draw with restored settings

state 1state 1

state 2state 2

back to state 2back to state 2

Page 24: HTML5 Canvas

IMAGE

MANIPULATION

Page 25: HTML5 Canvas

DRAW IMAGE

var img = new Image(); //Create an image objectimg.src = 'dog.png'; //Set source img.onload = function(){ //Wait for the image to load

context.drawImage(img,x,y); //Draw image to canvas}

Page 26: HTML5 Canvas

REDRAW IMAGE

//clear the stageclearRect(0,0,canvas.width,canvas.height);speed = 10;if (previous_x < mouse_x){direction = 1; //moving left to right} else {direction = -1; //moving right to left}var new_x = previous_x + (speed * direction);context.drawImage(img,new_x,y);

Page 27: HTML5 Canvas

IMAGES AT THE PIXEL LEVELGet image data and loop through pixel by pixel

Page 28: HTML5 Canvas

LOOPING THROUGH PIXELS

c.drawImage(img,0,0);var imgData = c.getImageData(0,0,canvas.width,canvas.height);for(n=0; n<data.width*data.height; n++) {var index = n*4; //each pixel has 4 data points//rgb values from 0-255red = imgData.data[index];green = imgData.data[index+1];blue = imgData.data[index+2];alpha = imgData.data[index+3];//to reset pixels, change the values in the data arrayimgData.data[index+2] = 255; //change the blue value}

Page 29: HTML5 Canvas

ANIMATION

Page 30: HTML5 Canvas

ANIMATION

Canvas doesn't track objects on the screen –

You must redraw the stage for each movement

Use event listeners or timers

Page 31: HTML5 Canvas

FOLLOW THE MOUSE

• Draw the image on the canvas• Track the position of the mouse (event listener

for every mouse move)• Redraw the image every n seconds based on

the x position of the mouse

Page 32: HTML5 Canvas

VISUALIZE DATA

USE JSON DATA TO CREATEDYNAMIC DRAWINGS

CONNECT TO A WEB SERVICE(TWITTER, FOURSQUARE, ETC)

Page 33: HTML5 Canvas

BAR CHART

Page 34: HTML5 Canvas

MAP DATA TO CANVAS

//the data could also come in as a JSON objectvar data = {jane: 231,julie: 325,ben: 276}; //js objectvar highest_value = 325; //find programmaticallyvar pixel_units = canvas.height/highest_value;for (user in data){ //loop through data pointsvar bar_height = data[user] * pixel_units;var bar_title = user;}//now it's time to draw!

Page 35: HTML5 Canvas

COOL EXAMPLEEach bubble represents a tweet containing the word "water". Popping the bubble displays the tweet.

Page 36: HTML5 Canvas

GRAPHING LIBRAIRIES

• jQuery VisualizeAwesomeChartJS ... many more

Page 37: HTML5 Canvas

MOBILE TIPS• Javascript touch events instead of mouse

events• PhoneGap Framework to compile to native iOS

and Android apps

Page 38: HTML5 Canvas

CANVASGAMES

Page 39: HTML5 Canvas

GAMES EXAMPLES• Alex the Alligator http://alex4.tapjs.com• CATcher http://wpsystem.com.br/catcher/• Catch the goblin http://

www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

• Magician Fairy Rescue http://www.relfind.com/game/magician.html

• Canvas Rider, bike game http://canvasrider.com/

Page 40: HTML5 Canvas

CANVAS RIDER

Page 41: HTML5 Canvas

ORBIUM

Page 42: HTML5 Canvas

SIMPLE GAME EXAMPLE

Page 43: HTML5 Canvas

CODING GOBLINS1.Draw images for background, player, and

goblin2.Listen for arrow keys and change player

coordinates accordingly3.Detect hit by comparing monster's

coordinates to player's coordinates4.Redraw as frequently as possible

Page 44: HTML5 Canvas

3D DRAWING

Page 45: HTML5 Canvas

3D IN CANVAS

Page 46: HTML5 Canvas

3D• A few options:• Canvas 3D context• Canvas WebGL context• Simulated 3D in 2D context• Libraries ... three.js, c3dl, k3d, Sylvester

Page 47: HTML5 Canvas

WebGL CONTEXT

var canvas = document.getElementById("glcanvas");// Use standard WebGL context or experimental if it's not available gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

// Define initial WebGL settingsif (gl) { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);}// It gets more complex from here!

Page 48: HTML5 Canvas

LIBRARIES

• KineticJS Canvas drawing & animation library• Three.JS 3D library• Processing.js Port of Processing environment• GLGE WebGL library • melonJS game engine• ImpactJS game engine

Page 49: HTML5 Canvas

PROCESSING.js

• Reads files from Processing programming environment

• Uses processing-like code in Javascript• More flexibility with objects -- collisions,

mouseover, etc

Page 50: HTML5 Canvas

KINETIC JS

• Dynamically creates a series of canvas elements as "layers"• Provides a Stage class and code similar to Actionscript• Allow easy object moving, dragging, and tracking

Page 51: HTML5 Canvas

LEARNING RESOURCES

BEST LIBRARIESTUTORIALS & TOP EXAMPLES

Page 52: HTML5 Canvas

Q&A

Page 53: HTML5 Canvas

THANK YOU!Robyn Overstreet & Jovena Whatmoor