4. 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>
5. 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>
6. 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
7. 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
8. 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 c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
9. 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);
10. 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);
11. LAB#4 New Element HTML5
ให้นักศึกษาสร้างเว็บเพจ HTML5 โดยให้มี Canvas และมีการแทรกวิดีโอไฟล์แบบ
HTML5 นาเสนอให้สวยงาม
คะแนนเต็ม 10 คะแนน
ตามความยากง่ายของงานและความสวยงาม
========= ส่งในชั่วโมง ========================
