Download as ODP, PPTX
![Regular Expressions ● We can add regular expressions to <input> tags for validation, There is no JavaScript required. <form action="" method="post"> <label for="username">Create a Username: </label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required> <button type="submit">Go </button> </form>](https://image.slidesharecdn.com/html5-150715135855-lva1-app6891/75/Graphics-Animation-with-HTML5-14-2048.jpg)
![Rendering Text ● We can fill text or make outline of text by using fillText(text, x, y, [maxWidth]) and strokeText(text,x,y, [maxWidth]) here maxWidth is optional. function draw(){ var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = “48px serif”; ctx.fillText(“Hello world”, 10, 50); ctx.stroke(“Hello world”,50, 50); }](https://image.slidesharecdn.com/html5-150715135855-lva1-app6891/75/Graphics-Animation-with-HTML5-22-2048.jpg)
Uploaded byKnoldus Inc.
Graphics & Animation with HTML5
The document provides an overview of HTML5, highlighting its new features such as enhanced media support, new input types, and structural elements like <header> and <footer>. It discusses HTML5 graphics using <canvas> for drawing and rendering, along with techniques for animation. It emphasizes the methods for controlling animations and includes demo links for practical understanding.
Graphics & Animation with HTML5
- 1. Graphics & Animation withHTML5 Graphics & Animation with HTML5 Pushpendu Purkait Software Consultant Knoldus Software LLP Pushpendu Purkait Software Consultant Knoldus Software LLP
- 2. Agenda ● Introduction ofHTML5 ● What's new in HTML5 ? ● HTML5 Graphics ● HTML5 Animation ● Demo
- 3. Introduction of HTML5 ●HTML5 is the fifth revision and newest version of the HTML standard. ● It offers new features that provide not only rich media support, but also enhance support for creating web applications that can interact with the user, his/her local data, and servers, more easily and effectively than was possible previously.
- 4. What's new inHTML5 ● DOCTYPE ● The <Figure> element ● No More Types for Scripts and Links ● New <input> types – color – number – email – url – range
- 5. What's new inHTML5 cont.. ● <header>,<footer> tags ● Required Attribute ● <audio>,<video> tag ● Regular Expression
- 6. DOCTYPE ● HTML4 – <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. ”> ● HTML5 – <!DOCTYPE html>
- 7. The <figure> tag ●Before <img src=”path/to/image” alt=”alternate text”> <p>Description of image</p> ● Now <figure> <img src=”path/to/image” alt=”alternate text”> <figcaption> <p>Description of image</p> </figcaption> <figure>
- 8. No more typesfor Scripts and links ● Before <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> ● Now <link rel="stylesheet" href="path/to/stylesheet.css" />
- 9. New <input> tags ●Color - To choose color from the color palette ● Number – To get only numbers in textbox. ● Email – To get only email in textbox. ● Url – To get only URL in textbox. ● Range – To get value within a range.(By using Slider)
- 10. <header><footer> tags ● <header>tag is used to add header on web page. ● <footer> tag is used to add footer on web page.
- 11. Required Attribute ● Usercan't leave the field blank ● JavaScript is no longer required for client side validation. <input type="text" name="Input" required="required">
- 12. <audio> tag ● <audio>tag is used to add an audio file to web page. ● In case <audio> tag is not supported by web browser, We can add alternative text. ● Multiple files can be added if first is not supported by browser then next will be played. ● We can add controllers in <audio> tag. <audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a>Download this file.</a> </audio>
- 13. <video> tag ● <video>tag is used to add video to the web page. ● In case <video> tag is not supported by web browser, We can add alternative text. ● Multiple files can be added if first is not supported by browser then next will be played. ● We can add controllers in <video> tag. ● We can access out webcam and show it in <video> tag. <video id=”webcam”> <p> Your browser is doesn't support it.</p> </video> <script> var video = document.getElementById('webcam'); Video.src = window.URL.createObjectURL(localMediaStream); <script>
- 14. Regular Expressions ● Wecan add regular expressions to <input> tags for validation, There is no JavaScript required. <form action="" method="post"> <label for="username">Create a Username: </label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required> <button type="submit">Go </button> </form>
- 15. HTML5 Graphics ● <canvas>is the most important part of HTML5 graphics. – At first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. – <canvas> has only two attributes height & width. both are optional and can be set using DOM properties. ● Fallback Content- If browser doesn't support canvas than we can add fallback content.
- 16. HTML5 Graphics cont... ●We can draw anything on <canvas> by using some inbuilt functions. ● Some tasks which can be done in canvas: – Drawing Rectangle – Drawing Path (lines & arcs) – Applying Colors & Style – Rendering Text – Applying Transformation (translation,scaling, rotating)
- 17. Canvas Context ● Thereis a context of canvas by which we draw everything on canvas. ● Context contains some properties for drawing for example: color, width etc. ● For best practice when we call any function, we should always save() the context first and at last restore() the context.
- 18. Drawing Rectangle ● Wecan draw rectangles by 3 ways – fillRect(x,y, width, height):- draws a filled rectangle. – strokeRect(x,y, width, height):- draws an outline. – clearRect(x,y,width, height):- clears the area.
- 19. Drawing Path ● Pathscan be of two types – Closed – Open ● There are some steps of drawing a line on canvas – BeginPath():- creates a new path – moveTo(x,y):- moves the cursor to (x,y) point. – lineTo(x,y):- draws line from current position to (x,y) point – stroke() :- draws the line on canvas.(without this no lines will be drawn) – closePath():- draws line from current position to first point. – fill():- fills the closed path.
- 20. Applying Colors &Style ● We can set fillStyle for filling the object. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)'; ctx.fillRect(j*25,i*25,25,25); } } }
- 21. Applying Colors &Style ● We can set strokeStyle for outlining the object. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')'; ctx.beginPath(); ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); ctx.stroke(); } } }
- 22. Rendering Text ● Wecan fill text or make outline of text by using fillText(text, x, y, [maxWidth]) and strokeText(text,x,y, [maxWidth]) here maxWidth is optional. function draw(){ var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = “48px serif”; ctx.fillText(“Hello world”, 10, 50); ctx.stroke(“Hello world”,50, 50); }
- 23. Applying Transformation ● Thereare 3 types of transformations – Translation – change position of an object. – Scaling – change size of an object. – Rotation – rotating an object with respect to a point.
- 24. Translation function draw() { varctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<3;i++) { for (var j=0;j<3;j++) { ctx.save(); ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; ctx.translate(10+j*50,10+i*50); ctx.fillRect(0,0,25,25); ctx.restore(); } } }
- 25. Rotating function draw() { varctx = document.getElementById('canvas').getContext('2d'); ctx.fillStyle = "#0095DD"; ctx.fillRect(30,30, 100, 100); ctx.rotate((Math.PI/180)*25); ctx.fillStyle = "#4D4E53"; ctx.fillRect(30,30, 100, 100); ctx.fillStyle = "#0095DD"; ctx.fillRect(150, 30, 100, 100); ctx.translate(200, 80); // translate to rectangle center ctx.rotate((Math.PI/180)*25); // rotate ctx.translate(-200, -80); ctx.fillStyle = "#4D4E53"; ctx.fillRect(150, 30, 100, 100); }
- 26. Scaling function draw() { varctx = document.getElementById('canvas').getContext('2d'); // draw a simple rectangle, but scale it. ctx.save(); ctx.scale(10, 3); ctx.fillRect(1,10,10,10); ctx.restore(); // mirror horizontally ctx.scale(-1, 1); ctx.font = "48px serif"; ctx.fillText("MDN", -135, 120); }
- 27. HTML5 Animation ● Animationis a part of Canvas. ● Animation is nothing but rendering canvas frame by frame. ● There are some basic steps for animation – Clear the canvas – Save the canvas state – Draw animated shapes – Restore canvas state
- 28. Controlling the animation ●Shapes are drawn to the canvas by using the canvas methods directly or by calling custom functions. In normal circumstances, we only see these results appear on the canvas when the script finishes executing. For instance, it isn't possible to do an animation from within a for loop. ● Instead we can schedule them to occur after a particular time. ● There are three ways to control the rendering of frames. – setInterval(function, delay) – setTImeout(function, delay) – requestAnimationFrame(callback)
- 29. Controlling the animationcont... ● setInterval(fxn, delay):- Starts repeatedly executing the function specified by function every delay milliseconds. ● setTimeout(fnx,delay):- Executes the function specified by function in delay milliseconds. ● requestAminationFrame(callback):-Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. It gives us 60 frames/second.
- 30. Demo ● Video Demo:Video ● Webcam Demo : Webcam ● HTML5 Graphics: Graphics ● HTML5 Animation: Animation