Lab#4 html5new element
•Download as PPTX, PDF•
0 likes•543 views
The document discusses new elements being introduced in HTML5 including <canvas>, <audio>, <video>, <datalist>, and <keygen>. The <canvas> element allows drawing onto an area using JavaScript, and examples are provided for drawing shapes, text, gradients, and images onto the canvas. Additional media elements like <audio> and <video> are introduced for embedding sound and video into web pages, along with new form input elements.
More Related Content
Viewers also liked
Similar to Lab#4 html5new element
Similar to Lab#4 html5new element (20)
More from Yaowaluck Promdee
More from Yaowaluck Promdee (20)
Recently uploaded
Recently uploaded (20)
Lab#4 html5new element
- 1. HTML5 NEW ELEMENT 322432 Web Design Technology
- 3. Syntax HTML5 <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
- 6. HTML5 New Elements TAG Description Canvas Example <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas>
- 7. New media element Tag Description <audio> <video> <source> <embed> <track> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4”> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
- 8. New Form Element Tag Description <datalist> Specifies a list of pre- defined options for input controls <keygen> Defines a key-pair generator field (for forms) < output> Defines the result of a calculation
- 9. Canvas Draw Onto The Canvas With JavaScript Example <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> First, find the <canvas> element: The fillRect(x,y,width,height) X Y
- 10. Example Canvas //Circle var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); //Text var c1=document.getElementById("myCanvas1"); var ctx1=c1.getContext("2d"); ctx1.font="30px Arial"; ctx1.fillText("Hello World",10,50);
- 11. Canvas – Gradients Example var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
- 12. Canvas - Images Example <p>Image to use:</p> <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);
- 13. LAB#4 New Element HTML5 HTML5 Canvas HTML5 10 ========= ========================