1 / 21

HTML 5

HTML 5. Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it. HTML 5. New features based on HTML, CSS, DOM, Javascript Reduces need for externals plugins (like Flash, ..) “Should be” device independent. HTML 5 – interesting features.

keegan-rice
Download Presentation

HTML 5

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. HTML 5 Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it

  2. HTML 5 • New features based on HTML, CSS, DOM, Javascript • Reduces need for externals plugins (like Flash, ..) • “Should be” device independent

  3. HTML 5 – interesting features • <canvas> element tag for 2D drawing • <audio> and <video> for media playback • Other new elements ( <article>, <footer>, <mark>, ...) • Support for local storage • New form controls (calendar, ..)

  4. HTML 5 – Canvas element • Focus on <canvas> element • A container for graphics • ( 0, 0 ) is top left corner of canvas • Need to use a script to draw the graphics • Supported by IE9, Firefox, Safari, Opera, Chrome

  5. 500 X 200 Canvas element (0, 0) (500, 0) (200, 0) (500, 200)

  6. HTML 5 • getContext( “2d” ) returns a CanvasRenderingContext2D object that allows to draw on the canvas •  could ultimately reduce need for Flash • var can = document.getElementsByTagName( “canvas” )[0]; • var context = can.getContext( “2d” );

  7. HTML 5 • Draw and paint text, lines, rectangles, circles, polygons, images, .. • Save and restore state of context • Change coordinate system (rotate, translate, ..) • Gradients, shadows, images (access pixels), ..

  8. HTML 5 – setting the context • Set value of fillStyle and strokeStyle of the context • rgb  3 parameters • rgba  4th parameter is for opacity value • context.fillStyle = "rgb(255, 0, 0 )"; • context.strokeStyle = "rgba(0, 255, 0, 0.8 )"; • 20% transparent (80% opaque)

  9. HTML 5 – rectangle • To paint the inside of a rectangle, use fillRect; to draw the rectangle, use strokeRect (x and y are relative to the canvas) • void fillRect ( floatx, floaty, floatwidth, floatheight); • void strokeRect ( doublex, doubley, doublewidth, doubleheight);

  10. HTML 5 – rectangle • To clear a rectangle • void clearRect ( floatx, floaty, floatwidth, floatheight); • Color used is the color of the canvas

  11. HTML 5 – drawing shapes • Set context (stroke and/or fill color) • Start a “path” to draw or fill context.beginPath( ); • Build the path • Close the path (or not) • Draw it or fill it

  12. HTML 5 - line • To draw a line context.beginPath( ); context.moveTo( 50, 50 ); // start point context.lineTo( 250, 50 ); context.stroke( ); // use current strokeStyle color

  13. HTML 5 - polygon • // build a polygon context.beginPath( ); context.moveTo( 50, 100 ); context.lineTo( 250, 100 ); context.lineTo( 120, 180 ); context.lineTo( 80, 150 ); context.closePath( ); // close the polygon

  14. HTML 5 - polygon • Now draw the polygon (defined by the current path) context.stroke( ); • Now fill the polygon (defined by the current path) context.fill( );

  15. HTML 5 – arcs and circles • A circle is an arc that is full • An arc is a portion of a circle defined by a start angle and an endAngle • Need center, radius, and whether the drawing is clockwise or counterclockwise

  16. HTML 5 – arcs and circles • void arc ( floatx, floaty, floatradius, floatstartAngle, floatendAngle, booleananticlockwise); • Angles are in radians, measured from x axis, going clockwise • If endAngle – startAngle = 2 * PI ( or a multiple of 2 * PI )  circle • If endAngle – startAngle = PI ( or –PI)  half circle

  17. HTML 5 – arcs and circles • // build an arc context.beginPath( ); x = 200; // relative to canvas y = 100; // relative to canvas radius = 50; startAngle = 0; endAngle = Math.PI / 4; // 45 degrees anticlockwise = true;

  18. HTML 5 – arcs and circles context.arc( x, y, radius, startAngle, endAngle, anticlockwise ); • Draw the arc context.stroke( ); • Fill the arc context.fill( );

  19. HTML 5 – arcs and circles • Not what you expected for the filling of the arc? •  Fill 2 half circles instead

  20. HTML 5 – Pacman • Paint the Pacman, Paint the full circle, erase the full circle, Paint the Pacman, .. • Need to do the above with some time between the paintings (otherwise too fast) • Can make Pacman move

  21. HTML 5 – More Pacman • Can make Pacman move responding to an event ( right key for example) • onkeydown event

More Related