Lập trình wed Part5 advance

HTML5 Support Trình duyệt HTML5 đa số trình duyệt hỗ trợ 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý HTML5 Canvas Khái niệm Phần tử element dùng để vẽ hiệu ứng đồ họa Phần tử chứa khung cho việc đồ họa Cần dùng Javascript để thực thi việc vẽ hình Canvas có vài phương thức để vẽ đường thẳng, khối hộp, vòng tròn, văn hay thêm hình ảnh 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý HTML5 Canvas Ví dụ Một canvas vùng hình chữ trang HTML Mặc định, canvas viền hay nội dung 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý HTML5 Canvas Ví dụ Để thêm viền cho canvas, dùng style inline (nội dòng) 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý HTML5 Canvas Ví dụ Vẽ nội dung dùng JavaScript: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý HTML5 Canvas Ví dụ Vẽ đường thẳng: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý HTML5 Canvas Ví dụ Vẽ đường tròn: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý HTML5 Canvas Ví dụ Văn có viền ngoài: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50); 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý HTML5 Canvas Ví dụ Hiệu ứng vòng tròn mờ dần: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý HTML5 Canvas Ví dụ Vẽ hình ảnh:

Canvas to fill:

Your browser does not support the HTML5 canvas tag.

Try it

8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 10 HTML Multimedia Phần tử Để hiển thị video HTML, dùng phần tử Your browser does not support the video tag 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 31 HTML Multimedia Phần tử Cách hoạt động Thuộc tính Control thêm điều khiển, play, pause, hay volume Thẻ cho phép thêm video dự phòng Nếu trình duyệt không hỗ trợ định dạng video, hiển thị nội dung báo lỗi cặp thẻ 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 32 HTML Multimedia Phần tử Trình duyệt hỗ trợ 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 33 HTML Multimedia Phần tử Dạng media hỗ trợ 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 34 HTML Multimedia Phần tử Dạng media hỗ trợ 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 35 HTML Multimedia Phần tử Để hiển thị đoạn âm thanh, dùng phần tử Your browser does not support the audio element 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 36 HTML Multimedia HTML Plugins Các ứng dụng trợ giúp (plug-ins) chương trình máy tính giúp mở rộng chức trình duyệt Ví dụ plugin tiếng Java applet Các plug-in thêm vào trang web thẻ thẻ Các plug-in dùng cho nhiều mục đích như: hiển thị đồ, quét virus hay chứng thực tài khoản ngân hàng, etc, … 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 37 HTML Multimedia Phần tử Phần tử trình duyệt hỗ trợ Phần tử định nghĩa đối tượng nhúng vào tài liệu HTML Phần tử dùng để nhúng plug-in (như Java applet, trình đọc PDF, Flash Player) trang web 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 38 HTML Multimedia Phần tử Phần tử nhúng mã HTML Hoặc hình ảnh 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 39 HTML Multimedia Phần tử Phần tử tất trình duyệt hỗ trợ Phần tử định nghĩa đối tượng nhúng vào tài liệu HTML Nhiều trang web hỗ trợ thời gian dài Tuy nhiên, không phần đặc tả HTML trước HTML5 đời 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 40 HTML Multimedia Phần tử Nhúng file swf: Hoặc trang HTML: Hoặc hình ảnh: 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 41 Video YouTube YouTube Video Id https://www.youtube.com/watch?v=Om2FTvF2zqM  ID: Om2FTvF2zqM 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 42 Video YouTube Nhúng video YouTube HTML Thuộc tính src nội dung đường dẫn video YouTube Dùng autoplay 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 43 Video YouTube Nhúng video YouTube HTML Loop (chơi liên tục) Hiển thị control (điều khiển) 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 44 Video YouTube Nhúng video YouTube HTML Dùng phần tử Hoặc 8/10/2017 Tạ Hoàng Thắng - Thái Duy Quý 45 ... Trong SVG, hình đối tượng Nếu thuộc tính đối tượng thay đổi, trình duyệt tự động thay đổi hình dạng Canvas hiển thị pixel Trong canvas, trình duyệt không nhớ hình vẽ Nếu vị trí hình bị thay đổi,