Lab#4 html5new element
14
HTML5 NEW ELEMENT 322432 Web Design Technology
-
Upload
yaowaluck-promdee -
Category
Education
-
view
269 -
download
1
description
html5 new element
Transcript of Lab#4 html5new element
HTML5 NEW ELEMENT 322432 Web Design Technology
Syntax HTML5
<!DOCTYPE html><html><head><title>Title of the document</title></head>
<body>The content of the document......</body>
</html>
www.kapook.com
www.teenee.com
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>
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>
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
CanvasDraw 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
Example Canvas//Circlevar 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);
Canvas – GradientsExamplevar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
// Create gradientvar grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");
// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
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);
LAB#4 New Element HTML5
ให�น�กศึ'กษาสำร�างเว)บเพิ่จ HTML5 โดยให�มี� Canvas แล่ะมี�การ แท๊รกว�ด�โอไฟิล่�แบบ HTML5 น าเสำนอให�สำวยงามี
คะแนนเต็)มี 10 คะแนน ต็ามีความียากง�ายของงานแล่ะความีสำวยงามี
========= สำ�งในช้��วโมีง ========================
Referencehttp://www.w3schools.com/html/default.asp
http://www.808.dk/?code-html-5-video
http://www.bigbuckbunny.org/index.php/download/
