Successfully reported this slideshow.

HTML5 Canvas

5

Share

Upcoming SlideShare
Introduction to HTML5 Canvas
Introduction to HTML5 Canvas
Loading in …3
×
1 of 53
1 of 53

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

HTML5 Canvas

  1. 1. March 19, 2012 7 – 9 PM CLASS WELCOME
  2. 2. HOST: APPNEXUS THANK YOU
  3. 3. INTRODUCTION INSTRUCTOR ROBYN OVERSTREET
  4. 4. WHAT IS HTML5 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
  5. 5. 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
  6. 6. CANVAS IN ACTION • Rough GuidesKEXP Archive Sketchpad Wired Mind NYC Restaurant Health Ratings Map
  7. 7. BROWSER SUPPORT • Firefox •Chrome •Safari •IE 9 • See CanIUse.com for up-to-date support info
  8. 8. 2D DRAWING
  9. 9. THE GRID
  10. 10. SET-UP FOR DRAWING grab the canvas element var mycanvas = document.getElementById("the_canvas"); var context = mycanvas.getContext("2d"); set up a 2D context
  11. 11. DRAWING A RECTANGLE context.fillStyle = "rgba(0, 204, 204, 1)"; context.fillRect(40,50,110,70);
  12. 12. DRAWING LINES context.beginPath(); //set up to draw a path context.moveTo(x,y); //move to the start position context.lineTo(x,y); //set the end pointcontext.stroke(); //draw the line 3. Draw line between 1. Set start position points 2. Set end position
  13. 13. DRAWING CURVES Control point 1 Control point 2 bezierCurveTo(100,25 ... ...400,25... Start point MoveTo(25,125) Destination point ...325,125);
  14. 14. CODING CURVES var controlPt1 = {x:110,y:30}; var controlPt2 = {x:130,y:80}; var startPt = {x:75,y:140}; ctx.beginPath(); //prepare path ctx.moveTo(startPt.x,startPt.y); ctx.bezierCurveTo( controlPt1.x,controlPt1.y, controlPt2.x,controlPt2.y, startPt.x,startPt.y ); ctx.stroke();
  15. 15. DRAWING ARCS 1.5 * PI Start angle Start angle PI 0 Center point End angle End angle Center point 0.5 * PI
  16. 16. DRAWING ARCS & CIRCLES • Circles are types of arcs • Angles are in radians (need to calculate between degrees and radians) ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI*2, true);ctx.closePath();ctx.fill(); Start angle Start angle End angle End angle
  17. 17. TEXT • Text is "drawn" to the canvas context.fillText("Hello world", 10, 50); • Style text in CSS syntax with .font property • Get the dimensions of a text area textObj = ctx.measureText(d); width = textObj.width;
  18. 18. TRANSFORMATION S
  19. 19. 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
  20. 20. TRANSLATE CONTEXT Context moved. Context moved. The origin point now The origin point now has a new location. has a new location.
  21. 21. TRANSLATE & ROTATE Translate Rotate translate(x, y) rotate(angle)
  22. 22. THE STATE STACK State 1Fill Style: redRotation: 45deg State 2 Fill Style: redRotation: 45deg State 1 save() tate 2Fill Style: blackLine Style: blue cale: 50% restore() cale: 50%
  23. 23. SAVE & RESTORE ctx.fillRect(0,0,150,150); //Draw with default settings ctx.save(); // Save the default state ctx.fillStyle = '#09F'; //Change the fill color state 1 ctx.fillRect(15,15,120,120); // Draw with new settings ctx.save(); //Save the current state ctx.fillStyle = '#FFF'; //Change fill again ctx.fillRect(15,15,120,120); // Draw with new settings state 2 ctx.restore(); //Restore to last saved state ctx.fillRect(45,45,60,60); //Draw with restored settings back to state 2
  24. 24. IMAGE MANIPULATION
  25. 25. 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 }
  26. 26. REDRAW IMAGE //clear the stage clearRect(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);
  27. 27. IMAGES AT THE PIXEL LEVEL Get image data and loop through pixel by pixel
  28. 28. 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-255 red = 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 array imgData.data[index+2] = 255; //change the blue value } }
  29. 29. ANIMATION
  30. 30. ANIMATION Canvas doesn't track objects on the screen – You must redraw the stage for each movement Use event listeners or timers
  31. 31. 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
  32. 32. VISUALIZE DATA USE JSON DATA TO CREATE DYNAMIC DRAWINGS CONNECT TO A WEB SERVICE (TWITTER, FOURSQUARE, ETC)
  33. 33. BAR CHART
  34. 34. MAP DATA TO CANVAS //the data could also come in as a JSON object var data = {jane: 231,julie: 325,ben: 276}; //js object var highest_value = 325; //find programmatically var pixel_units = canvas.height/highest_value; for (user in data){ //loop through data points var bar_height = data[user] * pixel_units; var bar_title = user; } //now it's time to draw!
  35. 35. COOL EXAMPLE Each bubble represents a tweet containing the word "water". Popping the bubble displays the tweet.
  36. 36. GRAPHING LIBRAIRIES • jQuery VisualizeAwesomeChartJS ... many more • ... many more
  37. 37. MOBILE TIPS • Javascript touch events instead of mouse events • PhoneGap Framework to compile to native iOS and Android apps
  38. 38. CANVAS GAMES
  39. 39. 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/
  40. 40. CANVAS RIDER
  41. 41. ORBIUM
  42. 42. SIMPLE GAME EXAMPLE
  43. 43. CODING GOBLINS 1.Draw images for background, player, and goblin 2.Listen for arrow keys and change player coordinates accordingly 3.Detect hit by comparing monster's coordinates to player's coordinates 4.Redraw as frequently as possible
  44. 44. 3D DRAWING
  45. 45. 3D IN CANVAS
  46. 46. 3D • A few options: • Canvas 3D context • Canvas WebGL context • Simulated 3D in 2D context • Libraries ... three.js, c3dl, k3d, Sylvester
  47. 47. 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 settings if (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!
  48. 48. 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
  49. 49. PROCESSING.js • Reads files from Processing programming environment • Uses processing-like code in Javascript • More flexibility with objects -- collisions, mouseover, etc
  50. 50. 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
  51. 51. LEARNING RESOURCES BEST LIBRARIES TUTORIALS & TOP EXAMPLES
  52. 52. Q&A
  53. 53. THANK YOU! Robyn Overstreet & Jovena Whatmoor

Editor's Notes

  • http://www.wired.co.uk/mind http://mugtug.com/sketchpad http://www.nytimes.com/interactive/dining/new-york-hea lth-department-restaurant-ratings-map.html http://kexparchive.org/ http://makethemost.roughguide s.com
  • 1canvas-base.html
  • 2canvas-lineclick.html The code example uses a mouse listener
  • 3canvas-bezier.html
  • radians = degrees * (pi/180) last parameter (bool) is anticlockwise Circle example in canvas-keyboard.html - also keyboard listener example Circle in: canvas-bounce.html
  • The foursqare example uses text
  • build slide?
  • Translate code is used in canvas-dogrun.html Also in the foursquare example, used to rotate text
  • canvas-dogrun.html
  • Dog run example is in code/canvas-img.html
  • http://hakim.se/experiments/html5/wave/03/
  • http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/ Awesome JS http://cyberpython.github.com/AwesomeChartJS/ jQuery Visualize: http://www.filamentgroup .com/lab/update_to_jquery_visualize_accessibl e_charts_with_html5_from_designing_with/
  • http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
  • Tutorial: https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL
  • cakejs http://code.google.com/p/cakejs/ GLGE WebGL library http://www.glge.org http://www.m elonjs.org/ http:// www.aerotwist.com/tu torials/getting-started -with-three-js/
  • ×