Lý thuyết lập trình ngôn ngữ html5 và css3 phần 4

Lý thuyết lập trình ngôn ngữ html5 và css3 từ cơ bản đến nâng cao phần 4.

CANVAS CỦA HTML5

!   Tổng quan về Javascript vˆ Jquery

!   Lˆm việc với Javascript

!   Lˆm việc với thư viện Jquery

!   Học Javascript, jQuery với w3schools

!   Ch•n c‡c thˆnh phần video, audio vˆo trang

!   iều khiển video với Javascript

!   Lˆm quen với thˆnh phần canvas

!   Sử dụng thˆnh phần cavas để thực hiện:

!   Vẽ h“nh vˆ đường

!   çp dụng mˆu vˆ cọ fradient

!   Thực hiện tạo h“nh động

!   Tại sao phải th•m video, ‰m thanh vˆo trang web?

!   Tạo n•n trang web hấp dẫn

!   Thu hœt sự truy cập của người duyệt với website

!   Lˆ một c‡ch tiếp cận người d•ng

!   Trước khi c— HTML5, lˆm c‡ch nˆo để ch•n video,

‰m thanh vˆo trang web?

!   Phải sử dụng plug-ins của c‡c c™ng ty thứ 3 (third

party)

!   HTML5 ch•n video, ‰m thanh vˆo trang web như thế nˆo?

!   Cung cấp thˆnh phần HTML video chạy trong tr“nh

duyệt

!   T’ch hợp th•m với Javascript

!   C‰u lệnh:

video sẽ được chơi ngay khi trang được load

<video src= video/BigBuck.ogg autoplay ></video>

!   HTML5 cung cấp th•m c‡c iều khiển cho video:

!   Controls: cung cấp tr“nh iều khiển video tr•n c‡c

<video src= video/BigBuck.ogg controls poster = poster854.jpg

width = 320 height = 180 ></video>

!   Audio: thuộc t’nh nˆy cho phŽp tắt tiếng của video, gi‡ trị 'muted'

!   Loop: thuộc t’nh nˆy sẽ k’ch hoạt oạn video ph‡t lại

!   Preload: cho phŽp tải oạn video ngay khi tải trang

web, giảm thời gian tải video

!   Th•m c‡c thuộc t’nh để video được hỗ trợ tr•n

nhiều tr“nh duyệt:

!   C— nhiều định dạng, codec cho video nhưng kh™ng phải lœc nˆo

c ng hỗ trợ HTML5 video hiển thị tr•n c‡c tr“nh duyệt

¥  Định dạng theo chuẩn m‹ nguồn mở

¥  Được hỗ trợ bởi c‡c tr“nh duyệt Chrome, Firefox, Opera

¥  Sử dụng codec H.264 vˆ ‰m thanh sử dụng codec AAC

¥  Được hỗ trợ bởi IE, Safari, iOS vˆ Android

!   Để oạn video ở cả 2 định dạng Ogg vˆ MP4 sẽ giœp hiển thị tốt tr•n c‡c tr“nh duyệt vˆ thiết bị

!   Th•m thuộc t’nh type, codecs: m™ tả cấu trœc kiểu

của file ogg, mp4

<video controls poster= poster320.jpg width= 320 height= 180 >

<source src= video/BigBuck.mp4 type= video/mp4;

codecs= avc1.42E01E, mp4a.40.2 >

!   iều khiển video với Javascript:

Tạo nút sử dụng javascript đề điều khiển video 

!   Khởi tạo hˆm trong javascript để thực hiện c‡c sự

kiện: Play, Pause, É

<script type="text/javascript">

var video = document.getElementsByTagName('video')[0];

var playPause = document.getElementById('playPause');

!   Ch•n ‰m thanh vˆo trang web sử dụng HTML5:

<audio controls>

<source src= video/BigBuck.ogg >

<source src= video/BigBuck.mp3 >

</audio>

!   Canvas lˆ hˆm API vẽ 2 chiều của HTML5

!   H“nh vẽ sử dụng Canvas:

!   Cập nhật được trong thời gian thực

!   Lưu lại dưới định dạng png

!   Sử dụng c‡c thˆnh phần Canvas để x‡c định bề

mặt vẽ , nhưng phải x‡c định hướng vẽ vˆ d˜ng kết quả, h“nh dạng, mˆu sắc với Javascript

!   Canvas lu™n lˆm việc c•ng với javascript

!   C‡c bước lˆm việc với Canvas:

!   Định ngh a thˆnh phần canvas trong HTML

!   Tham chiếu bối cảnh vẽ cho c‡c phần từ — như một biến trong Javascript

!   Đối tượng getContext( 2d ) lˆ đối tượng HTML5

chứa c‡c phương thức vẽ đường path, h“nh hộp, h“nh tr˜n, character, h“nh ảnh, v.vÉ

!   Định ngh a kiểu mˆu t™ lˆ mˆu đỏ

!   Ưu iểm của thˆnh phần Canvas:

!   Cho phŽp tạo graphic, h“nh động (animation),

gradient, c‡c đối tượng đồ họa kh‡c bằng m‹

!   ‹ được c‡c tr“nh duyệt phổ biến hỗ trợ

!   Khả n ng mạnh mẽ: lˆm game, animation, chart,

graph, vector, É

!   Kh™ng phải sử dụng th•m plugin

!   Vẽ đường path:

!   Đường path: tạo n•n c‡c h“nh dạng cơ sở

path 

Hình  chữ  nhật 

Đường  thẳng 

Hình  tròn  Đường 

cong 

x += 3;

if(x > 300){

x = -50;

y=Math.random()*300; }

} }

!   Khi ch•n video, ‰m thanh vˆo trang web n•n khai

b‡o c‡c định dạng ogg, mp4, mp3 để được c‡c tr“nh duyệt phổ biến hỗ trợ tốt nhất

!   Khi vẽ c‡c h“nh cơ bản với Canvas, iều cần chœ !: