Storing Data in The Client ◮ Saves information unique to users ◮ On Server: ◮ Less network traffic ◮ Less processing power f-iacobelli@neiu.edu Web App Dev
HTML 5 Ideas behind the standard ◮ Better use of resources (for Mobile) ◮ Get rid of plugins (like Flash) ◮ Largely seemless integration with Javascript, CSS and DOM ◮ Markup to replace frequen or complex scripting f-iacobelli@neiu.edu Web App Dev
HTML5 Doctype <!DOCTYPE html /> f-iacobelli@neiu.edu Web App Dev
Canvas <canvas id="myCanvas" width="300" height="300></canvas> ◮ Use Javascript to draw on it. ◮ (0,0) is at the top-left corner of the box. X (0,0) Y Coords. f-iacobelli@neiu.edu Web App Dev
Drawing on a Canvas Javascript to the Rescue Start a javscript section. Obtain a context for the canvas ("2d"). Then draw <script type="text/javascript"> var canvas = document.getElementById("drawing"); var context = canvas.getContext("2d"); context.fillStyle = "yellow"; context.fillRect(5,10,200,75); context.strokeStyle = "royalblue"; context.lineWidth = 6; context.strokeRect(4,9,201,76); </script> f-iacobelli@neiu.edu Web App Dev
Drawing Lines Paths Place the cursor with moveTo Draw a line with lineTo context.beginPath(); context.moveTo(10,10); context.strokeStyle="red"; context.lineTo(400,10); context.lineTo(400,100); context.stroke(); There are more attributes to add to a line (lineCap, lineJoin, etc.) f-iacobelli@neiu.edu Web App Dev
Arcs and Circles Radians, Clockwise, Counter clockwise, Oh My Arcs require 4 parameters ◮ x , y coordinates of the center ◮ r radius of the circle ◮ α, ω star and end angles of the arc in radians 1 . ◮ dir is Optional: true if clockwise, false for counter clockwise context.arc(35,50, 0, Math.PI,true) 1 2 π = 360 o f-iacobelli@neiu.edu Web App Dev
Curves Quadratic Quadratic curves require four parameters: ◮ ix , iy coordinates of the inflexion point ◮ x , y end point ◮ Starting point is given by last point in path context.moveTo(10,10); context.quadraticCurveTo(25,5,95,50); f-iacobelli@neiu.edu Web App Dev
Gradients Gradients require some process: ◮ createLinearGradient(x,y,p,q) start and end coordinates. ◮ addColorStop(x,color) at what percentage of the line to arrive at which color var gradient = context.createLinearGradient(0,0,400,400); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"navy"); context.fillStyle = gradient; context.fillRect(0,0,400,400); You can also have radial gradients. f-iacobelli@neiu.edu Web App Dev
Images Instagram-like drawImage takes 5 parameters ◮ imageName Canvas, video or image ◮ x , y top left corner of the image ◮ width , height of the image drawImage(imageObj,x,y,width,height) Does not work very well on all browsers. f-iacobelli@neiu.edu Web App Dev
Transformations Scale and Translate: ◮ scale(width,height) scales width and height of path. ◮ translate(x,y) Translates the origin of the canvas to (x,y) f-iacobelli@neiu.edu Web App Dev
More On Cavas Event Handling ◮ Getting the cursor position: canvas.addEventListener("click", showCoords, ◮ function showCoords(e){ alert("X:"+e.pageX+" Y:"+e.pageY); } more at A simple game in JS. f-iacobelli@neiu.edu Web App Dev
SVG Graphics <embed src="image.svg" type="image/svg+xml" /> f-iacobelli@neiu.edu Web App Dev
Recommend
More recommend
