HTML5 Canvas

  • 1,011 views
Uploaded on

Slideshow presented for Skilfer.com HTML5 Canvas course

Slideshow presented for Skilfer.com HTML5 Canvas course

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,011
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
47
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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/

Transcript

  • 1. March 19, 2012 7 – 9 PM CLASS WELCOME
  • 2. HOST: APPNEXUSTHANK YOU
  • 3. INTRODUCTION INSTRUCTOR ROBYN OVERSTREET
  • 4. WHAT IS HTML5 CANVAS?• HTML5 element, now part of HTML5 API• Used for drawing and animating directly in HTML, withJavaScript scripting• Originally developed by Apple for Dashboard widgets
  • 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. CANVAS IN ACTION• Rough GuidesKEXP Archive Sketchpad Wired Mind NYC Restaurant Health Ratings Map
  • 7. BROWSER SUPPORT• Firefox•Chrome•Safari•IE 9• See CanIUse.com for up-to-date support info
  • 8. 2DDRAWING
  • 9. THEGRID
  • 10. SET-UP FOR DRAWING grab the canvas elementvar mycanvas = document.getElementById("the_canvas");var context = mycanvas.getContext("2d"); set up a 2D context
  • 11. DRAWING A RECTANGLEcontext.fillStyle = "rgba(0, 204, 204, 1)";context.fillRect(40,50,110,70);
  • 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 between1. Set start position points 2. Set end position
  • 13. DRAWING CURVES Control point 1 Control point 2 bezierCurveTo(100,25 ... ...400,25... Start pointMoveTo(25,125) Destination point ...325,125);
  • 14. CODING CURVESvar 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();
  • 15. DRAWING ARCS 1.5 * PIStart angleStart anglePI 0 Center point End angle End angle Center point 0.5 * PI
  • 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. 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 areatextObj = ctx.measureText(d);width = textObj.width;
  • 18. TRANSFORMATION S
  • 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. TRANSLATE CONTEXT Context moved. Context moved.The origin point nowThe origin point now has a new location. has a new location.
  • 21. TRANSLATE & ROTATETranslate Rotatetranslate(x, y) rotate(angle)
  • 22. THE STATE STACKState 1Fill Style: redRotation: 45deg State 2Fill Style: redRotation: 45deg State 1 save()tate 2Fill Style: blackLine Style: bluecale: 50% restore()cale: 50%
  • 23. SAVE & RESTOREctx.fillRect(0,0,150,150); //Draw with default settingsctx.save(); // Save the default state ctx.fillStyle =#09F; //Change the fill color state 1ctx.fillRect(15,15,120,120); // Draw with new settingsctx.save(); //Save the current statectx.fillStyle = #FFF; //Change fill againctx.fillRect(15,15,120,120); // Draw with new settings state 2ctx.restore(); //Restore to last saved statectx.fillRect(45,45,60,60); //Draw with restored settings back to state 2
  • 24. IMAGEMANIPULATION
  • 25. DRAW IMAGEvar img = new Image(); //Create an image objectimg.src =dog.png; //Set sourceimg.onload = function(){ //Wait for the image to load context.drawImage(img,x,y); //Draw image to canvas}
  • 26. 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);
  • 27. IMAGES AT THE PIXEL LEVELGet image data and loop through pixel by pixel
  • 28. LOOPING THROUGH PIXELSc.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}}
  • 29. ANIMATION
  • 30. ANIMATIONCanvas doesnt track objects on the screen –You must redraw the stage for each movement Use event listeners or timers
  • 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. VISUALIZE DATAUSE JSON DATA TO CREATEDYNAMIC DRAWINGSCONNECT TO A WEB SERVICE(TWITTER, FOURSQUARE, ETC)
  • 33. BAR CHART
  • 34. 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 its time to draw!
  • 35. COOL EXAMPLEEach bubble represents a tweet containing the word "water". Popping thebubble displays the tweet.
  • 36. GRAPHING LIBRAIRIES• jQuery VisualizeAwesomeChartJS ... many more• ... many more
  • 37. MOBILE TIPS• Javascript touch events instead of mouse events• PhoneGap Framework to compile to native iOS and Android apps
  • 38. CANVASGAMES
  • 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. CANVAS RIDER
  • 41. ORBIUM
  • 42. SIMPLE GAME EXAMPLE
  • 43. CODING GOBLINS1.Draw images for background, player, and goblin2.Listen for arrow keys and change player coordinates accordingly3.Detect hit by comparing monsters coordinates to players coordinates4.Redraw as frequently as possible
  • 44. 3DDRAWING
  • 45. 3D IN CANVAS
  • 46. 3D• A few options:• Canvas 3D context• Canvas WebGL context• Simulated 3D in 2D context• Libraries ... three.js, c3dl, k3d, Sylvester
  • 47. WebGL CONTEXTvar canvas = document.getElementById("glcanvas");// Use standard WebGL context or experimental if its notavailablegl = 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!
  • 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. PROCESSING.js• Reads files from Processing programming environment• Uses processing-like code in Javascript• More flexibility with objects -- collisions, mouseover, etc
  • 50. KINETIC JS• Dynamically creates a series of canvaselements as "layers"• Provides a Stage class and code similar toActionscript• Allow easy object moving, dragging, andtracking
  • 51. LEARNINGRESOURCESBEST LIBRARIESTUTORIALS& TOP EXAMPLES
  • 52. Q&A
  • 53. THANK YOU! Robyn Overstreet & Jovena Whatmoor