09-HTLM5.pdf - More HTLM5 Features 2018\/19 COMP3322A Modern Technologies on WWW Content \u2022 HTML5 Canvas \u2022 HTML5 Audio Video \u2022 HTML5 Drag Drop \u2022

09-HTLM5.pdf - More HTLM5 Features 2018/19 COMP3322A...

This preview shows page 1 - 8 out of 34 pages.

More HTLM5 Features 2018/19 COMP3322A Modern Technologies on WWW
Image of page 1
Content HTML5 Canvas HTML5 Audio & Video HTML5 Drag & Drop HTML5 Local Storage HTML5 Geolocation
Image of page 2
HTML5 Canvas The <canvas> element is a two-dimension drawing surface that uses JavaScript coding to perform drawing: for example: creating lines, shapes, fills, text, animations, and so on. all using the native browser behavior and without proprietary plug-ins like Flash. Add a canvas space with the <canvas> element and specify the dimension with the width and height attributes. By default, no border and no content. For browsers that don’t support the canvas element, provide some fallback content inside the tags. < canvas width="150" height="150"> The browser does not support HTML5 canvas. </ canvas > Fallback content
Image of page 3
HTML5 Canvas To display something, a script first needs to access the rendering context and draw on it. Example to draw the rectangles: <html> <head> <script> function draw () { var canvas = document.getElementById ( 'canvas' ); if ( canvas.getContext ) { var ctx = canvas.getContext ( '2d' ); ctx.fillRect ( 25 , 25 , 100 , 100 ); ctx.clearRect ( 45 , 45 , 60 , 60 ); ctx.strokeRect ( 50 , 50 , 50 , 50 ); } } </script> </head> <body onload = "draw();" > <canvas id = "canvas" width = "150" height = "150" > </canvas> </body> </html> Define the space Obtain the rendering context and its drawing functions Drawing
Image of page 4
Rendering Contexts The getContext() method returns an object that provides methods and properties for drawing on the canvas. There are currently two widely supported contexts: "2d" for 2-D graphics and "webgl" for 3-D graphics through the OpenGL interface. Only "2d" will be discussed. canvas.getContext( contextType );
Image of page 5
Drawing Drawing Rectangle Define a path and draw lines/curves/arcs Method Description fillRect(x,y,w,h) Draws a rectangle and fill with color (default: black) starting at coordinate: (x,y) with width w and height h strokeRect(x,y,w,h) Draws a rectangular outline. clearRect(x,y,w,h) Clears the rectangle defined by (x,y) and size (w,h) Method Description beginPath() Starts a path drawing closePath() Ends a path drawing moveTo(x 1 ,y 1 ) Moves to location (x 1 ,y 1 ) without drawing lineTo(x 2 ,y 2 ) Sets the end point of the line to (x 2 ,y 2 ) arc(x,y,r,s,e) Draws a circle or arc path, centre at (x,y) with radius r, starting the arc at angle s (in radians), and ending at angle e. [Default clockwise direction] quadraticCurveTo() Creates a quadratic Bézier curve path bezierCurveTo() Creates a cubic Bézier curve path stroke() Draws the path fill() Fills the current drawing
Image of page 6
Text and Color Method / Property Description font Sets or returns the current font properties for text content (same syntax as the CSS font property) textAlign Sets or returns the current alignment (start | end | center | left | right) for the text content fillText(text,x,y) Draws and fills text on the canvas strokeText(text,x,y) Draws text on the canvas (no fill) fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing strokeStyle Sets or returns the color, gradient, or pattern used for strokes createLinearGradient() Creates a linear gradient (to use on canvas content) createRadialGradient() Creates a radial/circular gradient (to use on canvas content)
Image of page 7
Image of page 8

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture