HTML5: Video, canvas, audio

1. CANVAS
là một phần tử mới xuất hiện trong HTML5 và rất hữu ích trong việc vẽ đồ họa trên nền web. Nó lần đầu được giới thiệu bởi Apple, sau đó được ứng dụng nhiều vào trong trình duyệt Safari và bây giờ các trình duyệt phổ biến cũng đã hỗ trợ . Để canvas chạy được với IE ta cần thêm [url=http://code.google.com/p/explorercanvas/]ExplorerCanvas[/url]

Tại sao chúng ta cần Canvas

Bởi vì Canvas có thể giúp hiển thị trực quan một số hình ảnh dễ dàng trên trình duyệt như:

  • Các sơ đồ đơn giản
  • Trang trí thêm cho giao diện người dùng
  • Hình ảnh động
  • Biểu đồ và đồ thị
  • Có thể nhúng các ứng dụng vẽ
  • Hoạt động tốt với những hạn chế của CSS

Cần gì để tìm hiểu

Sử dụng không khó, bạn chỉ cần có kiến thức về HTML và JavaScript. Ví dụ đơn giản dưới đây sẽ giúp bạn hiểu thêm về

Đây là đọan code mình vẽ là cờ Việt Nam :

01 html>
02 head>
03 script type="application/x-javascript">
04 function draw(){
05 // Lấy ra vị trí canvas
06 var canvas = document.getElementById('canvas');
07 if (canvas.getContext){
08 var ctx = canvas.getContext('2d');
09 // Đầu tiên vẽ nền đỏ trước
10 ctx.fillStyle = "rgb(255,0,0)";
11 ctx.fillRect (0, 0, 500, 300);
12 // Để vẽ sharp cần có .beginPath()
13 ctx.beginPath();
14 // Chọn màu ngôi sao là màu vàng
15 ctx.fillStyle = 'yellow';
16 // Chỉ ra tọa độ bắt đầu (x,y) dựa theo width và height trong html
17 ctx.moveTo(250,80);
18 // Bắt đầu vẽ
19 ctx.lineTo(200,200);
20 ctx.lineTo(320,125);
21 ctx.lineTo(180,125);
22 ctx.lineTo(300,200);
23 ctx.closePath();
24 // Vẽ xong cần tô màu
25 ctx.fill();
26 }
27 }
28 script>
29 head>
30 body onLoad="draw();">
31 canvas id="canvas" width="500" height="300">canvas>
32 body>
33 html>

Ví dụ trên rất cơ bản, để tìm hiểu thêm về như vẽ đồ thị, hình động hoặc cao hơn là viết các game nhỏ sử dụng canvas bạn có thể đọc tại [url=https://developer.mozilla.org/en/Canvas_tutorial]đây[/url] và tải về [url=http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf]API cheatsheet[/url] của nó

2. AUDIO

Định nghĩa và sử dụng

Tag định nghĩa âm thanh, như nhạc hay trường audio khác.

cấu trúc, ví dụ và các thuộc tính của thẻ audio các bạn có thể tải bài báo cáo đầy đủ về tham khảo

3. VIDEO

Định nghĩa và sử dụng

Tag xác định một video, chẳng hạn như một đoạn phim hoặc một trường video.

cấu trúc, ví dụ và các thuộc tính của thẻ video các bạn có thể tải bài báo cáo đầy đủ về tham khảo

link download:http://www.mediafire.com/?6ydwd6cw2a92hod