TÌM HIỂU ĐỒ HỌA HTML5 VÀ CSS3 - Full 10 điểm

UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA: CÔNG NGHỆ THÔNG TIN

----------

NGUYỄN VĂN THÂN

TÌM HIỂU ĐỒ HỌA TRÊN HTML5 VÀ CSS3

KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC

Quảng Nam, tháng 05 năm 2016

UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA: CÔNG NGHỆ THÔNG TIN

----------

NGUYỄN VĂN THÂN

TÌM HIỂU ĐỒ HỌA TRÊN HTML5 VÀ CSS3

Sinh viên thực hiện:
NGUYỄN VĂN THÂN
MSSV: 2112011030
CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

KHÓA : 2012 – 2016

Cán bộ hướng dẫn:
ThS. HỒ TUẤN ANH

Quảng Nam, tháng 05 năm 2016

LỜI CẢM ƠN
Em xin chân thành cảm ơn các thầy cô trường Đại Học Quảng Nam, thầy
cơ khoa Cơng Nghệ Thơng Tin đã tận tình giảng dạy, trang bị cho chúng em
những kiến thức quý báu trong quá trình học tập tại trường. Đặc biệt em xin
chân thành cảm ơn thầy Hồ Tuấn Anh đã hướng dẫn em tận tình trong suốt thời
gian làm đề tài khóa luận để em hồn thành tốt khóa luận.
Với sự hiểu biết có hạn, khóa luận khơng thể tránh khỏi thiếu sót, em rất
mong được sự giúp đỡ của các thầy cô để khóa luận được hồn thiện hơn.

Em xin chân thành cảm ơn.

Quảng Nam tháng 05 năm 2016
Sinh viên thực hiện

Nguyễn Văn Thân

DANH MỤC TỪ VIẾT TẮC

STT Từ viết tắc Diễn giải

1 HTML HyperText Markup Language

2 SGML standard Generalized Markup Language

3 CSS Cascading Style sheet

4 DOM Document Object Model

5 RIA Rich Internet Application

6 API Application Programming Interfaces

DANH MỤC CÁC BẢNG Trang
Tên bảng 6
Bảng các thuộc tính trong thẻ <video> 7
Bảng các thuộc tính thẻ <audio> 22
Bảng thuộc tính đồ họa trong canvas: 31
Bảng các thuộc tính đổ bóng:

DANH MỤC HÌNH ẢNH

STT Hình ảnh Số trang
10
1 Hình 1: hình xác định vị trí 20
26
2 Hình 2: ảnh IE8 khi sử dụng excanvas.compiled.js 27
28
3 Hình 3: hình minh họa cho đường thẳng 29
29
4 Hình 4 : hình minh họa cho hình trịn 31
32
5 Hình ảnh 5 : hình minh họa cho hình chữ nhật 34
36
6 Hình 6: hình chữ được tơ màu 37
38

7 Hình 7: hình chữ khơng được tơ màu 39
40
8 Hình 8: hình gradient xuyên tâm

9 Hình 9: hình minh họa cho đổ bóng

10 Hình 10: hình minh họa cho vẽ ảnh trên canvas

11 Hình11: hình minh họa cho vẽ độ họa

12 hình 12: hình quả bóng tỉnh

13 Hình 13: hình quả bóng di chuyển

14 Hình 14: hình quả bóng được thêm dấu hiệu lực

15 Hình 15: hình quả bóng được di chuyển bằng chuột

MỤC LỤC

Phần 1. MỞ ĐẦU..................................................................................................................... 1
1.1. Lý do chọn đề tài ............................................................................................................. 1

1.2. Mục tiêu của đề tài........................................................................................................... 1

1.3. Đối tượng và phạm vi nghiên cứu ................................................................................... 2

1.4. Phương pháp nghiên cứu ................................................................................................. 2

1.5. Lịch sử nghiên cứu .......................................................................................................... 2

1.6. Đóng góp của đề tài ......................................................................................................... 2

1.7. Cấu trúc đề tài.................................................................................................................. 2

Phần 2. NỘI DUNG NGHIÊN CỨU....................................................................................... 3
Chương 1: CƠ SỞ LÝ THUYẾT ............................................................................................ 3

1.1. Tổng quan về HTML ...................................................................................................... 3

1.1.1. Lịch sử của HTML ....................................................................................................... 3

1.1.2. Sự ra đời của HTLM5................................................................................................... 4

1.1.3. Cú pháp của HTML5 .................................................................................................... 5

1.1.4. Thành phần mới trong HTML5 .................................................................................... 6

1.1.4.1. Thẻ <video>........................................................................................................... 6
1.1.4.2. Thẻ <audio>........................................................................................................... 7
1.1.4.3. Thẻ <canvas>......................................................................................................... 8
1.1.4.4. Web Form .............................................................................................................. 8
1.1.4.5. Một số thành phần mới khác ................................................................................. 9
1.1.5. Khả năng tương thích HTML5 ..................................................................................... 9

1.2. Tổng quan về API và công cụ hổ trợ ............................................................................... 9

1.3. Tổng quan về CSS3 ....................................................................................................... 11

1.3.1. Tổng quan về CSS3 ................................................................................................ 11

1.3.2. Một số thành phần CSS3 mới................................................................................. 11
1.3.3. Thuộc tính mới trong CSS3.................................................................................... 11
1.4. Giới thiệu về Javascrip .................................................................................................. 12

1.5. Thư viện Jquery ............................................................................................................. 14

1.6. Đồ họa trên web và sự ra đời của canvas trên HTML5................................................. 16

1.7. Canvas là gì?.................................................................................................................. 17

1.7.1. Thuộc tính............................................................................................................... 17
1.7.2. Phương thức............................................................................................................ 18
1.7.3. Cấu trúc .................................................................................................................. 18
1.8. Sơ Lược về vẽ đồ họa của Canvas................................................................................. 19

1.9. Giới thiệu vẽ đồ họa 2D bằng canvas ........................................................................... 19

1.9.1. Thuộc tính đồ họa ................................................................................................... 21
1.10. Thành phần canvas 2D API ......................................................................................... 22

1.11. Ưu điểm của thành phần canvas .................................................................................. 24

Chương 2: ỨNG DỤNG ĐỒ HỌA ........................................................................................ 25
2.1. Ứng dụng vẽ đường trong canvas.................................................................................. 25

2.1.1. Vẽ đường thẳng ...................................................................................................... 25
2.1.3. Vẽ hình chữ nhật.....................................................................................................27
2.1.4. Vẽ tiêu đề................................................................................................................ 28
2.1.5. Gradients................................................................................................................. 30
2.1.6. Đổ bóng .................................................................................................................. 31

2.1.7. Hình ảnh ................................................................................................................. 32
2.2. Vẽ đồ họa trên canvas.................................................................................................... 35

2.3. Thêm hiệu ứng di chuyển .............................................................................................. 36

2.3.1. Thêm hiêu ứng di chuyển ....................................................................................... 38
2.3.2. Thêm dấu hiệu lực .................................................................................................. 39
2.3.3. Thêm điều khiển chuột ........................................................................................... 40
KẾT LUẬN VÀ KIẾN NGHỊ................................................................................................ 41
1. Kết luận ............................................................................................................................... 41
2. Kiến nghị ............................................................................................................................. 41
Tài Liệu Tham Khảo .............................................................................................................. 42

Phần 1. MỞ ĐẦU

1.1. Lý do chọn đề tài
Hiện nay với sự phát triển của nền công nghệ, đặt biệt sự phát triển của

ngành công nghệ thông tin vào trong các lĩnh vực cũng như các hoạt động vui
chơi giải trí. Các trình duyệt web có thể chạy trên máy tính bàn, laptop, và trên
cả điện thoại. Các ứng dụng với đầy đủ các hiệu ứng hình ảnh, âm thanh hầu hết
được tạo ra bởi Flash, khả năng tương tác của các công nghệ với các thành phần
xung quanh(các thẻ HTML) không được thuận lợi. Các ứng dụng cũng bị hạn
chế trên nhiều trình duyệt.

Với sự ra đời của HTML5 cùng với các thành phần API mới , những giới
hạn trên đã được xóa bỏ và đang dần thay thế được công nghệ Flash, với các
ứng dụng cần những hiệu ứng đồ họa và chuyển động đặc biệt, lập trình viên có
thể sử dụng Canvas với kiểu bitmap. Khơng chỉ áp dụng cho việc thiết kế các
trang web trực quan, HTML5 còn được áp dụng để tạo ra các thư viện đồ họa

giúp tạo ra các ứng dụng đồ thị, game trong cả môi trường 2D, 3D như những
ứng dụng trên desktop.

HTML5 và CSS3 khơng cịn bị giới hạn trên các trình duyệt mà cịn có
thể được triển khai trên desktop dưới dạng các widget, trên các thiết bị di động
và có thể bất kỳ thiết bị nào. Với HTML5 và CSS3 lập trình viên khơng cần sử
dụng hay u cầu người dùng cài dặt bất kì thư viện nào để có thể chạy được các
ứng dụng của họ.

1.2. Mục tiêu của đề tài
Tìm hiểu HTML5 và CSS3, các tính năng hổ trợ cho việc đồ họa tạo hiệu

ứng động trên web. Biết được cách tạo ra các hình ảnh chuyển động trên web
mà khơng cần sự hổ trợ của các công cụ flash, photoshop…

SVTH: Nguyễn Văn Thân Trang 1

1.3. Đối tượng và phạm vi nghiên cứu
Tìm hiểu HTML5.

Tìm hiểu CSS3.

Javascrip.

Canvas 2D API.

1.4. Phương pháp nghiên cứu
Tự nghiên cứu: có thể tìm hiểu qua mạng internet.

Nghiên cứu tài liệu trên thư viện, và nhiều tài liệu liên quan.

Trao đổi với giảng viên hướng dẫn.

1.5. Lịch sử nghiên cứu
Đề tài tìm hiểu về HTML5 và CSS3 đã được tìm hiểu nhiều, và được phát

triển rộng rãi, tuy nhiên vấn đề tìm hiểu chức năng đồ họa trên HTML5 thì ít
thấy người tìm hiểu nên tôi quyết định chọn đề tài này để làm đề tài khóa luận.

1.6. Đóng góp của đề tài
hiểu được sự phát triển của ngơn ngữ lập trình web, và sự phát triển của

HTML5 và CSS3 trong việc hổ trợ làm web.

giúp quản bá rộng rãi đồ họa trên web để nhiều người biết đến và tìm hiểu
ngôn ngữ này.

1.7. Cấu trúc đề tài
Bao gồm 2 chương với nội dung sau:

Chương 1: Cơ sở lý thuyết : Giới thiệu tổng quan về HTML, HTML5,
CSS3, Javascrip, làm quen các thành phần mới trong HTML5 và CSS3, khả
năng tương thích của HTML5, tìm hiểu về các tính năng của thành phần canvas
trên HTML5.

Chương 2: Ứng dụng đồ họa trên web: ứng dụng được áp dụng vào thực
tế để tạo ra các hình ảnh, hiệu ứng động hay làm web game.

SVTH: Nguyễn Văn Thân Trang 2

Phần 2. NỘI DUNG NGHIÊN CỨU

Chương 1: CƠ SỞ LÝ THUYẾT

1.1. Tổng quan về HTML

1.1.1. Lịch sử của HTML
HTML (viết tắc của HyperText Markup Language, tức là “ngôn ngữ đánh

dấu siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các
trang web , các mẫu thơng tin được trình bày trên world wide web. Được định
nghĩa như một ứng dụng đơn giản của SGML (standard Generalized Markup
Language), được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức
tạp. HTML đã trở thành một chuẩn internet do tổ chức world wide web
consortium (W3C). HTML ra đời năm 1989, do Tim Berners-Lee phát triển, nhờ
tính dễ học và dễ sử dụng nên HTML nhanh chóng được phổ biến.

Từ năm 1989-1997, HTML đã phát triển qua bốn cột mốc, phiên bản gần
nhất là html4, và DOM trở thành chuẩn cho phép các ứng dụng JavaScript chạy
thống nhất trên mọi trình duyệt. Tuy nhiên, HTML hiện khơng còn được phát
triển tiếp và được thay thế bằng XHTML.
Các giai đoạn phát triển của HTML:

 1990 – 1991: HTML xuất hiện với tên HTML Tags.
 1994: HTML2 ra đời.
 1996: Sự ra đời của HTML3, CSS và JavaScript.
 1998: HTML4, CSS2 ra đời.
 2000: chuẩn XHTML ra đời thay thế cho HTML4.
 2002: XHTML2 được phát triển.
 2005: XHTML2 vẫn được sử dụng, sự ra đời của Ajax.

 2008: HTML5 ra đời.

SVTH: Nguyễn Văn Thân Trang 3

1.1.2. Sự ra đời của HTLM5
HTLM5 là ngơn ngữ cấu trúc và trình bày nội dung cho World Wide Web

và sẽ là công nghệ cốt lõi của internet trong tương lai.
Đây là phiên bản thứ 5 của ngôn ngữ HTML, được giới thiệu bởi world

wide web consortium(w3c).
HTML5 giữ lại những đặc điểm cơ bản của html4 và bổ sung thêm các đặc

tả nổi trội của XHTML, DOM cấp 2, và Javascript.

Với sự tăng trưởng ngày càng mạnh mẽ của Internet, các thuật ngữ như
Web 2.0 và RIA (Rich Internet Application) hầu như hiện diện ở khắp nơi.
Người sử dụng, được trang bị phần cứng nhanh hơn và băng thông mạng tốt
hơn, cũng thường xuyên đặt ra những yêu cầu phức tạp. Web hiện đại không
phải chỉ là để sử dụng được, mà còn phải bắt mắt và giàu khả năng tương tác.

Trước thực tế đó, HTML cũng cần phải thay đổi, và sự thay đổi đó là cả
một q trình dài. HTML5 là thế hệ tiếp theo của HTML4. Đã có rất nhiều sự
thay đổi về cách mà các nhà phát triển web viết web từ khi HTML 4.01 trở
thành chuẩn năm 1999. Cho đến bây giờ là sau 11 năm, một vài tag của HTML
4.01 đã trở nên quá cũ, q ít người dùng cũng như có một số tag được nhiều
người dùng và trở thành tiêu chuẩn (một cách bất thành văn) thì với sự ra đời
của HTML 5 những sự thừa và thiếu đó đã được cải thiện một cách đáng kể. Bởi
vì HTML5 có rất nhiều các ưu điểm thu hút được sự chú ý của mọi người.
HTML5 mang trong mình đủ sức hấp dẫn để gây nên sự chú ý (hãy thử search

google để xem có bao nhiêu kết quả về HTML5) .

SVTH: Nguyễn Văn Thân Trang 4

1.1.3. Cú pháp của HTML5

Không phân biệt chữ hoa chữ thường
Các thành phần khơng bắt buộc phải có thẻ đóng
Khơng bắt buộc phải có nháy kép cho thuộc tính.

SVTH: Nguyễn Văn Thân Trang 5

1.1.4. Thành phần mới trong HTML5

1.1.4.1. Thẻ <video>

Thẻ <video> cho phép nhúng video vào trang web mà khơng cần dùng

plugin của trình duyệt.

Bảng các thuộc tính trong thẻ <video>

Thuộc Giá trị Ví dụ Mơ tả

tính

Audio muted Audio=”muted” Xác định trạng thái mặc

định của âm thanh.

Autoplay autoplay Autoplay=”autoplay” Xác định trạng thái tự động

chạy của video.

controls controls controls =”controls” Hiển thị bộ điều khiển của

video.

Height Pixel Height=”100px” Xác định chiều cao của

video.

Loop loop Loop=”loop” Xác định video có được lặp

lại hay không.

Poster url Poster Xác định hình đại diện cho

=”image/img_video.gif” video.

preload preload preload =“preload” Xác định việc tải video khi

tải trang.

Src url Src=”video/video.mpeg” Xác định việc tải video khi

tải trang.

Width Pixel Width=”100px” Xác định chiều rộng của

video

Ví dụ:

<video controls width="400px" height="400px" poster="image/video.gif">

<source src="file/demo_video.mp4">

</video>

SVTH: Nguyễn Văn Thân Trang 6

1.1.4.2. Thẻ <audio>

Thẻ <audio> cho phép nhúng file âm thanh vào trang web mà khơng cần

dùng plugin của trình duyệt.

Bảng các thuộc tính thẻ <audio>

Thuộc tính Giá trị Ví dụ Mô tả

autoplay autoplay Autoplay= Âm thanh tự động chạy.

“autoplay”

controls controls Controls = Hiển thị tính năng điều

“controls” khiển.

Loop loop Loop = ”loop” Hiển thị tính năng lặp lại khi

chạy xong đoạn âm thanh.

Preload Auto Preload = “auto” Xác định âm thanh có chạy

Metadata không khi tải trang.

none

Src url Src = Xác định đường dẫn tới file

“media/audio.mp3” âm thanh.

Ví dụ: