1 / 93

CS4506

CS4506. HTML5. The HTML5 specification was developed by the Web Hypertext Application Technology Working Group (WHATWG), which was founded in 2004 by was founded by people from Apple, the Mozilla Foundation and Opera Software The group’s website is at http://www.whatwg.org/

kirsi
Download Presentation

CS4506

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS4506

  2. HTML5 • The HTML5 specification was developed by the Web Hypertext Application Technology Working Group (WHATWG), which was founded in 2004 by was founded by people from Apple, the Mozilla Foundation and Opera Software • The group’s website is at http://www.whatwg.org/ • Their “living standard” for HTML5 is at http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html

  3. HTML5 preliminaries • In HTML5, the DOCTYPE declaration has been simplified, to just <!DOCTYPE HTML> • In HTML5, the character encoding declaration has been simplified, to this type of format <meta charset=“…." /> Example: <meta charset="UTF-8" /> • So a simple HTML document looks like <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> </body> </html>

  4. Drawing in HTML5 • HTML5 provides native support for drawing. • At present, only 2D drawing is supported • But 3D support is promised • Browser support for 2D drawing: • Firefox: 3.0+ • IE: 9 • Chrome: 3.0+ • Safari: 3.0+ • Opera: 10.0+ • iPhone: 1.0+ • Android: 1.0+ • BlackBerry: OS6.0

  5. The <canvas> element • HTML5 provides the new <canvas> element to specify the region where a drawing will be a produced • The default size of the region is 300px by 150 px • To specify a different size, use the width and height attributes, for example <canvas id="myCanvas" width="300" height="200"> </canvas> • By default, a canvas has no border, but we can specify one: <canvas id="myCanvas" width="300" height="200“ style="border:solid 1px #ccc; "> </canvas>

  6. Degrading gracefully • Since not all browsers support the canvas element, let your page degrade gracefully by including content in the element which will be displayed by older browsers <canvas id="myCanvas" width="300" height="200“ style="border:solid 1px #ccc; " > Your browser does not support the HTML5 canvas element </canvas>

  7. Degrading gracefully • Firefox support the canvas but IE 8 does not <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Canvas example</title> </head> <body> <canvas id="myCanvas" width="300" height="200" style="border:solid 1px #ccc;"> Your browser does not support the canvas element </canvas> </body> </html>

  8. Drawing in the canvas element • All drawing in the canvas element is done using JavaScript • First, the canvas element must be accessed: <canvas id="myCanvas" width="300" height="200"> Your browser does not support the HTML5 canvas element </canvas> <script type="text/JavaScript" language="JavaScript"> var canvas=document.getElementById('myCanvas'); … </script>

  9. Aside: the canvas interface • Source: http://www.w3.org/TR/html5/the-canvas-element.html interface HTMLCanvasElement: HTMLElement { attribute unsigned long width; attribute unsigned long height; DOMString toDataURL( in optional DOMString type, in any... args); void toBlob(in FileCallback, in optional DOMString type, in any... args); object getContext(in DOMString contextId, in any... args); };

  10. Drawing in the canvas element (contd.) • Having accessed the canvas, declare that you are drawing in 2D • This is done by establishing a 2d “context”: <canvas id="myCanvas" width="300" height="200"> Your browser does not support the HTML5 canvas element </canvas> <script type="text/JavaScript" language="JavaScript"> var canvas=document.getElementById('myCanvas'); var context = canvas.getContext("2d"); … </script>

  11. Aside: 2d context interface • Source: http://dev.w3.org/html5/2dcontext/#canvasrenderingcontext2d • interface CanvasRenderingContext2D { // back-reference to the canvas readonly attribute HTMLCanvasElement canvas; // state void save(); // push state on state stack void restore(); // pop state stack and restore state // transformations (default transform is the identity matrix) void scale(double x, double y); void rotate(double angle); void translate(double x, double y); void transform(double a, double b, double c, double d, double e, double f); void setTransform(double a, double b, double c, double d, double e, double f); // compositing attribute double globalAlpha; // (default 1.0) attribute DOMString globalCompositeOperation; // (default source-over) // colors and styles attribute any strokeStyle; // (default black) attribute any fillStyle; // (default black) CanvasGradientcreateLinearGradient(double x0, double y0, double x1, double y1); CanvasGradientcreateRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1); CanvasPatterncreatePattern(HTMLImageElement image, DOMString repetition); CanvasPatterncreatePattern(HTMLCanvasElement image, DOMString repetition); CanvasPatterncreatePattern(HTMLVideoElement image, DOMString repetition); // line caps/joins attribute double lineWidth; // (default 1) attribute DOMString lineCap; // "butt", "round", "square" (default "butt") attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter") attribute double miterLimit; // (default 10) // shadows attribute double shadowOffsetX; // (default 0) attribute double shadowOffsetY; // (default 0) attribute double shadowBlur; // (default 0) attribute DOMString shadowColor; // (default transparent black) // rects void clearRect(double x, double y, double w, double h); void fillRect(double x, double y, double w, double h); void strokeRect(double x, double y, double w, double h); // path API void beginPath(); void closePath(); void moveTo(double x, double y); void lineTo(double x, double y); void quadraticCurveTo(double cpx, double cpy, double x, double y); void bezierCurveTo(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y); void arcTo(double x1, double y1, double x2, double y2, double radius); void rect(double x, double y, double w, double h); void arc(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise); void fill(); void stroke(); void drawSystemFocusRing(Element element); boolean drawCustomFocusRing(Element element); void scrollPathIntoView(); void clip(); boolean isPointInPath(double x, double y); // text attribute DOMString font; // (default 10px sans-serif) attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start") attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic") void fillText(DOMString text, double x, double y, optional double maxWidth); void strokeText(DOMString text, double x, double y, optional double maxWidth); TextMetricsmeasureText(DOMString text); // drawing images void drawImage(HTMLImageElement image, double dx, double dy); void drawImage(HTMLImageElement image, double dx, double dy, double dw, double dh); void drawImage(HTMLImageElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh); void drawImage(HTMLCanvasElement image, double dx, double dy); void drawImage(HTMLCanvasElement image, double dx, double dy, double dw, double dh); void drawImage(HTMLCanvasElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh); void drawImage(HTMLVideoElement image, double dx, double dy); void drawImage(HTMLVideoElement image, double dx, double dy, double dw, double dh); void drawImage(HTMLVideoElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh); // pixel manipulation ImageDatacreateImageData(double sw, double sh); ImageDatacreateImageData(ImageData imagedata); ImageDatagetImageData(double sx, double sy, double sw, double sh); void putImageData(ImageData imagedata, double dx, double dy); void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight); };

  12. The drawing API • The drawing API supports both vector and bitmap graphics • We will look at vector graphics first and, later, at bitmap graphics

  13. Vector graphics in the drawing API • The API uses a coordinate system in which • the units of length are pixels • The origin is at the top left corner of the canvas • We draw something by • specifying a path and • then specifying either • a stroke (to make the path visible), • a fill (to fill the area enclosed by path) • or both

  14. Drawing a path • To start a path, we use the beginPath() method • Then, we use moveTo() to go to first point on the path • Then we progress to subsequent points on the path by using a mixture of several methods, including lineTo(), quadraticCurveTo(), bezierCurveTo(), and arc(). • To close a path, we use closePath()

  15. Example path • Here, we draw a simple, one-segment path from (50,50) to (150,150) <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Canvas example</title> </head> <body> <canvas id="myCanvas" width="300" height="200" style="border:solid 1px #ccc;"> Your browser does not support the canvas element </canvas> <script type="text/JavaScript" language="JavaScript"> var canvas=document.getElementById('myCanvas'); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(50,50); context.lineTo(150,150); </script> </body> </html>

  16. Example path • The path does not appear, because we did not give it a stroke <script … context.beginPath(); context.moveTo(50,50); context.lineTo(150,150); </script>

  17. Example path • The path appears when we give it a stroke <script … context.beginPath(); context.moveTo(50,50); context.lineTo(150,150); context.stroke(); </script>

  18. A path with two straight-line segments <script … context.beginPath(); context.moveTo(50,50); context.lineTo(150,150); context.lineTo(200,150); context.stroke(); </script>

  19. Closing a path <script … context.beginPath(); context.moveTo(50,50); context.lineTo(150,150); context.lineTo(200,150); context.closePath(); context.stroke(); </script>

  20. Line width • The default line width is 1px but we can specify other values <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.lineTo(200,150); context.closePath(); context.stroke(); </script>

  21. Two paths with different line widths • The path appears when we give it a stroke <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.stroke(); context.beginPath(); context.moveTo(150,150); context.lineWidth=8; context.lineTo(200,150); context.stroke(); </script>

  22. Line join style • The default style of line join is the miter join <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.lineTo(170,120); context.stroke(); </script>

  23. Line join style • We can make the miter join explicit <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.lineTo(170,120); context.lineJoin=“miter”; context.stroke(); </script>

  24. Line join style (contd.) • The bevel join <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.lineTo(170,120); context.lineJoin=“bevel”; context.stroke(); </script>

  25. Line join style (contd.) • The round join <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.lineTo(170,120); context.lineJoin=“round”; context.stroke(); </script>

  26. Line cap style • By default, lines have butt endings <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.stroke(); </script>

  27. Line cap style • We can make the butt ending explicit <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.lineCap=“butt”; context.stroke(); </script>

  28. Line cap style • We can also have a round ending <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.lineCap=“round”; context.stroke(); </script>

  29. Line cap style • We can also have a square ending • In most cases, this looks like a butt ending <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.lineCap=“square”; context.stroke(); </script>

  30. Reminder: a closed path <script … context.beginPath(); context.moveTo(50,50); context.lineTo(150,150); context.lineTo(200,150); context.closePath(); context.stroke(); </script>

  31. Filling the area enclosed by the path <script … context.beginPath(); context.moveTo(50,50); context.lineTo(150,150); context.lineTo(200,150); context.closePath() context.fill(); </script>

  32. We can specify any colour for the fill <script … context.beginPath(); context.moveTo(50,50); context.lineTo(150,150); context.lineTo(200,150); context.closePath(); context.fillStyle= “rgb(255,0,0)”; context.fill(); </script>

  33. Different ways of specifying colours • Several ways of specifying colours are supported: • rgb(_,_,_) syntax, for example “rgb(255,0,0)” • Hexadecimal RGB syntax, for example “#FF0000” • for those colours which have standard names, for example “red”

  34. Fill and stroke <script … context.beginPath(); context.lineWidth=4; context.moveTo(50,50); context.lineTo(150,150); context.lineTo(200,150); context.closePath(); context.fillStyle= “rgb(255,0,0)”; context.fill(); context.stroke(); </script>

  35. Fill before stroke • You should fill before stroking • Otherwise, half the lineWidth of the stroke will be hidden by the subsequent fill • In both scenes shown here, lineWidth=8 • In the first, we can see the full width, because fill preceded stroke • In the second, fill came after stroke

  36. Drawing with Bezier curves • Bezier curves are used in vector graphics in order to provide a smooth curved transition from one point,Pstart, to another point,Pend • There are various types of Bezier curves: • Linear Bezier “curves” • Quadratic Bezier curves • Cubic Bezier curves • etc.

  37. Linear Bezier “curves” • A straight line fromPstarttoPend is a linear Bezier “curve”

  38. Quadratic Bezier curves • A quadratic Bezier curve heads from Pstart in the direction of another point, P1, before bending so that, when it arrives at Pend, it is coming from the direction of P1 • In other words, the quadratic Bezier curve is a quadratic curve whose tangent at Pstart passes through P1 and whose tangent at Pend also passes through P1

  39. Using a quadratic Bezier curve to link two straight lines • Format: /* somehow get to (PstartX,PstartY) and then …*/quadraticCurveTo(P1X,P1Y,PendX,PendY); <script … context.beginPath(); context.moveTo(0,175); context.lineTo(25,150); context.moveTo(285,150); context.lineTo(310,175); context.stroke(); context.beginPath(); /*change colour*/ context.strokeStyle="rgb(255,0,0)"; context.moveTo(25,150); context.quadraticCurveTo(155,20,285,150); context.stroke(); </script>

  40. Only one path needed • We don’t need to have more than one path if we don’t want to have different colours for the different sub-paths. <script … context.beginPath(); context.moveTo(0,175); context.lineTo(25,150); context.quadraticCurveTo(155,20,285,150); context.lineTo(310,175); context.stroke(); </script> • Here, the two lines joined by the curve are hard to see because they are actually tangents, but on the next slide, we can see the joined lines more clearly

  41. Joining two non-tangents • This, unrealistic, application shows a bezier curve joining two lines that are perpendicular to the curve’s tangeents <script … context.beginPath(); context.moveTo(50,175); context.lineTo(25,150); context.quadraticCurveTo(155,20,285,150); context.lineTo(260,175); context.stroke(); </script>

  42. Viewing a quadratic Bezier curve and its tangents <script … context.beginPath(); context.moveTo(25,150); context.lineTo(155,20); context.lineTo(285,150); context.stroke(); context.beginPath(); context.moveTo(25,150); context.quadraticCurveTo(155,20,285,150); context.strokeStyle="rgb(255,0,0)"; context.stroke(); </script>

  43. Cubic Bezier curves • A cubic Bezier curve heads from Pstart in the direction of another point, P1, before bending so that, when it arrives at Pend, it is coming from the direction of yet another point, P2 • In other words, a cubic Bezier curve is a cubic curve whose tangent at Pstart passes through P1 and whose tangent at Pendpasses through P2

  44. Using a cubic Bezier curve to link two straight lines • Format: /* somehow get to (PstartX,PstartY) and then …*/ bezierCurveTo(P1X,P1Y,P2X,P2Y,PendX,PendY); <script … context.beginPath(); context.moveTo(0,175); context.lineTo(25,150); context.moveTo(385,150); context.lineTo(615,210); context.stroke(); context.beginPath(); context.moveTo(25,150); context.bezierCurveTo(85,90,155,90,385,150); context.strokeStyle="rgb(255,0,0)"; context.stroke(); </script>

  45. Viewing a cubic Bezier curve and its tangents <script … context.beginPath(); context.moveTo(25,150); context.lineTo(85,90); context.lineTo(155,90); context.lineTo(385,150); context.stroke(); context.beginPath(); context.moveTo(25,150); context.bezierCurveTo(85,90,155,90,385,150); context.strokeStyle="rgb(255,0,0)"; context.stroke(); </script>

  46. Drawing with a circular arc • Format: arc(centerX, centerY, radius, startAngle, endAngle, direction); • Specify angles in radians • Direction: counterClockwise=true; clockwise=false <script … context.beginPath(); context.moveTo(200, 85); context.lineTo(150,85); context.arc(100,100,25,Math.PI*1.1,Math.PI*.1.9,false); context.stroke(); </script>

  47. Be careful when drawing with an arc • When drawing with an arc, you should ensure that either • You begin a new path, or • You ensure you are at the starting point of the arc you intend to draw • Otherwise, an extra straight line will be drawn <script … context.beginPath(); context.moveTo(100,125); context.lineTo(100,100); context.stroke(); context.beginPath(); context.arc(100,100,25,Math.PI*1.1,Math.PI*1.9,false); context.stroke(); </script>

  48. Be careful when drawing with an arc (contd). – an extra line • If you don’t begin a new path or ensure that you are at the start of the arc, an extra straight line will be drawn, as can be seen below <script … context.beginPath(); context.moveTo(100,125); context.lineTo(100,100); /* context.stroke(); context.beginPath(); */ context.arc(100,100,25,Math.PI*1.1,Math.PI*1.9,false); context.stroke(); </script>

  49. Drawing rectangles • There are four methods for drawing rectangles: rect(topLeftX, topLeftY, rectangle width, rectangle height); fillRect(topLeftX, topLeftY, rectangle width, rectangle height); strokeRect(topLeftX, topLeftY, rectangle width, rectangle height); clearRect(topLeftX,topLeftY, rectangle width, rectangle height); • rect() makes a rectangular path but does not fill it or make the outline the visible <script … var canvas=document.getElementById('myCanvas'); var context = canvas.getContext("2d"); context.rect(100,100,25,25); context.stroke(); </script>

  50. Drawing rectangles • strokeRect() makes a rectangle and draws the outline using the current stroke style <script … var canvas=document.getElementById('myCanvas'); var context = canvas.getContext("2d"); context.strokeRect(100,100,25,25); </script>

More Related