Tìm hiểu về lập trình game 2d trên nền tảng html5

TRƢỜNG ĐẠI HỌC VINH
KHOA CÔNG NGHỆ THÔNG TIN
--------------------------

NGUYỄN VĂN CƯỜNG

BÁO CÁO
ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Tên đồ án:

TÌM HIỂU VỀ LẬP TRÌNH GAME 2D TRÊN
NỀN TẢNG HTML5

Nghệ An, tháng 05 năm 2016


TRƢỜNG ĐẠI HỌC VINH
KHOA CÔNG NGHỆ THÔNG TIN
--------------------------

BÁO CÁO
ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Tên đồ án:

TÌM HIỂU VỀ LẬP TRÌNH GAME 2D TRÊN NỀN
TẢNG HTML5

Sinh viên thực hiện: Nguyễn Văn Cường - 1151070384
Lớp: 52K1
Giáo viên hướng dẫn: TS. Trần Xuân Sang

Nghệ An, tháng 05 năm 2016


Đồ án tốt nghiệp đại học

LỜI CẢM ƠN
Trong xu hƣớng phát triển của nền công nghệ trên thế giới hiện nay, luôn xuất
hiện những công nghệ mới mạnh mẽ thay thế những cơng nghệ đã cũ. Trƣớc đây, khi
các trị chơi giải trí trên nền Web sử dụng Flash, rất hiệu quả ,phổ biến và cho phép
những ngƣời lập trình viên có thể tạo ra các game với hình ảnh, âm thanh đặc sắc.
Những công nghệ tƣơng tự nhƣ Java Applet hay Silverlight cũng không cạnh tranh
đƣợc với Flash. Tuy nhiên, Flash nặng nề, cần plugin để có thể chạy đƣợc các game
trên nền Web , và điểm yếu lớn nhất của Flash là khả năng tƣơng tác giữa Flash và
các thành phần xung quang nó dƣờng nhƣ là khơng thể. Chúng bị cô lập và hoạt động
độc lập với thế giới bên ngoài.
Giải pháp ban đầu là quay lại sử dụng HTML,Javascript và CSS, ta vẫn có thể
tạo ra game với các hiệu ứng đặc biệt và không bị giới hạn bởi công nghệ Flash. Tuy
nhiên trở ngại lớn nhất là khơng có đủ các API để tạo ra nhữg game tƣơng tự nhƣ
Flash, và tốc độ trên các game thuần HTML đều khá chậm và hầu nhƣ không thể chấm
nhận đƣợc với 1 game có yêu cầu cấu hình trung bình.
Nhƣng với sự ra đời của HTML5 cùng với các thành phần và hàm API mới ,
giới hạn trên đã bị phá bỏ và từng bƣớc thay thế dần các công nghệ cũ nhƣ Flash.
Không chỉ hỗ trợ 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 ứng dụng đồ thị,hiệu ứng chuyển động đặc biệt trong việc thiết kế
game trên cả môi trƣờng 2D lẫn 3D.
Cùng với sự chỉ bảo tận tình của Thầy Trần Xuân Sang em đã hồn thành đề
tài này. Trong q trình phân tích thiết kế khơng thể tránh khỏi những sai sót mong cơ,
thầy và các bạn đóng góp ý kiến để trang đề tài đƣợc hoàn thiện hơn.
Em xin chân thành cảm ơn!

Sinh viên thực hiện

Nguyễn Văn Cường

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

1


Đồ án tốt nghiệp đại học

MỤC LỤC
Trang
LỜI CẢM ƠN ......................................................................................................... 1
LỜI NÓI ĐẦU ......................................................................... Error! Bookmark not defined.

1. Lý do chọn đề tài ........................................................................................................ 4
2. Ý nghĩa thực tiễn của đề tài ........................................................................................ 4
CHƢƠNG 1 TỔNG QUAN VỀ NỀN TẢNG HTML5 ,CSS VÀ JAVASCRIPT ................... 5

1.1. Tìm hiểu HTML5 .................................................................................................... 5
1.1.1. Khái niệm HTML và lịch sử phát triển ............................................................... 5
1.1.2. HTML5 và công nghệ của tƣơng lai .................................................................... 5
1.2. Tìm hiểu về CSS ..................................................................................................... 6
1.2.1. Giới thiệu tổng quan về CSS ............................................................................... 6
1.2.2. Cách thức sử dụng ............................................................................................... 7
1.3. Tìm hiểu về Javascript ............................................................................................ 8
1.3.1. Tổng quan về Javascript ...................................................................................... 8
1.3.2. Cách khai báo và sử dụng .................................................................................... 8
CHƢƠNG 2 ĐỒ HỌA CANVAS TRÊN NỀN TẢNG HTML5 .............................................. 9

2.1. Các hàm API mới hỗ trợ lập trình game trên HTML5 ............................................ 9
2.1.1. Web Storage ................................................................................................................... 9
2.1.2. Web SQL Database ...................................................................................................... 10

2.1.3. Web Wroker ...................................................................................................... 11
2.2. Đồ họa nền tảng HTML5 – Canvas 2D API ......................................................... 13
2.2.1. Khái niệm Canvas .............................................................................................. 13
2.2.2. Ứng dụng của Canvas .................................................................................................... 14

2.2.3. Khai báo và sử dụng Canvas .............................................................................. 14
2.2.4. Bắt sự kiện con trỏ chuột ............................................................................................... 18

2.2.5. Các công cụ vẽ đồ họa trên canvas ..................................................................... 18
2.2.5.1.Các đƣờng vẽ .................................................................................................... 18
2.2.5.2. Vẽ các hình chữ nhật ....................................................................................... 20
2.2.5.3. Vẽ các đƣờng cong,hình trịn và bán nguyệt .................................................. 20
2.2.5.4. Các phép biến đổi tỉ lệ, tịnh tiến, quay tròn ................................................................ 21
2.2.5.5. Cắt ảnh ........................................................................................................................ 21
2.2.5.6. Viết chữ ...................................................................................................................... 22
CHƢƠNG 3 XÂY DỰNG GAME DEMO ”KHÔNG CHIẾN” TRÊN NỀN TẢNG HTML5 ...... 24

3.1. Ý tƣởng về game “Không Chiến” ......................................................................... 24
Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

2


Đồ án tốt nghiệp đại học
3.2. Các đối tƣợng 2D – Phân vai nhân vật ............................................................................. 24

3.3. Quá trình cài đặt xây dựng game ...................................................................................... 25
3.3. Cấu trúc và chức năng các hàm (function) của game ....................................................... 26
3.3.1. WindowAnimationTiming API – Đồ họa chuyển động ................................................ 26
3.3.3. initGame – Khởi tạo Game ............................................................................................ 27
3.3.4 MouseMovement – di chuyển ........................................................................................ 28
3.3.5. Gameupdate – hàm tính tốn xử lí va chạm .................................................................. 28
3.3.5.1. Va chạm giữa Maichar và Enemy .............................................................................. 28
3.3.5.2. Va chạm giữa Bullet và Enemy .................................................................................. 29
3.3.6. changeStater – reset khôi phục ...................................................................................... 30
3.3.7. gamePain – Vẽ đồ họa ................................................................................................... 31
3.3.8. gameloop - Vòng lặp game ............................................................................................ 31
3.3.9. Một số hình ảnh trong game “Khơng Chiến” ................................................................ 32
KẾT LUẬN .............................................................................. Error! Bookmark not defined.

1. Kết quả đạt đƣợc ....................................................................................................... 34
2. Những vấn đề hạn chế ......................................................................................................... 34
TÀI LIỆU THAM KHẢO ....................................................................................................... 35

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

3


Đồ án tốt nghiệp đại học

LỜI NÓI ĐẦU
1. Lý do chọn đề tài
Nhƣ chúng ta đã biết hiện nay công nghệ HTML5 là xu hƣớng của tƣơng lai
không chỉ trong việc thiết kế lập trình Web, mà cịn trong cả việc xây dựng ứng dụng
và game với những ƣu thế vƣợt trội, hỗ trợ mạnh mẽ đa nền tảng từ Web đến di động.

Để bắt kịp xu hƣớng phát triển của công nghệ ,em quyết định lựa chọn đề tài: “Tìm
hiểu lập trình game 2D trên nền tảng HTML5”.
2. Ý nghĩa thực tiễn của đề tài
+ Ý nghĩa đối với ngƣời lập trình game và ứng dụng:
- HTML5 rất mạnh mẽ, hỗ trợ nhiều API mới,hỗ trợ trên nhiều nền tảng. Các
lập trình viên có thể tạo đƣợc nhiều hiệu ứng đặc biệt mà không cần sử dụng đến
plugin bên thứ ba.
- Đơn giản hóa code Website,game và ứng dụng mà không làm giảm đi khả
năng tƣơng tác vƣợt trội của HTML5.
+ Ý nghĩa đối với ngƣời dùng:
- Ngƣời dùng có thể tƣơng tác với Website (nhƣ xem video,nghe nhạc, chơi
game,ứng dụng) một cách nhanh chóng mà khơng cần cài đặt plugin nặng nề của bên
thứ ba nhƣ Flash .
- Hơn thế nữa tốc độ phản hồi của website nhanh do khơng cần đến các plugin
khác.
- tính năng bảo mật cũng đƣợc cải thiện và nâng cấp, để bảo vệ tối đa thông tin
ngƣời dùng khi duyệt web

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

4


Đồ án tốt nghiệp đại học

CHƯƠNG 1
TỔNG QUAN VỀ NỀN TẢNG HTML5 ,CSS VÀ JAVASCRIPT
1. Tìm hiểu HTML5
1.1.

Khái niệm HTML và lịch sử phát triển

HTML là chữ viết tắt của từ tiếng Anh: HyperText Markup Language – dịch
sang tiếng Việt có nghĩa là ngơn ngữ đánh dấu siêu văn bản. Kỷ nguyên sơ khai của
web bắt đầu với HTML, sau đó đến CSS, rồi mới đến các ngơn ngữ lập trình web nhƣ
Javascript, PHP, ASP.NET…Tất cả chúng và nhiều thứ khác nữa tạo thành thế giới
web sống động nhƣ ngày nay.
Xuất hiện lần đầu tiên vào năm 1989 khi nhà vật lý học Tim Berners-Lee muốn
tìm ra một cách thức giúp các nhà khoa học trao đổi tài liệu nghiên cứu thơng qua
Internet. Ơng muốn rằng đó khơng chỉ là cách in các văn bản trực tiếp trên Internet mà
còn là cách hiển thị các đƣờng dẫn để đƣa ngƣời đọc đến các phần khác của tài liệu,
hoặc thậm chí là dẫn đến các tài liệu đƣợc đặt ở một nơi khác trên mạng Internet. Điều
đó có nghĩa là tạo nên một hệ thống tài liệu đƣợc kết nối toàn cầu. Ông đã phát minh
ra một giao thức cơ bản cho việc chuyển tải các tài liệu lên mạng Internet, gọi là Giao
thức truyền siêu văn bản (HTTP) cũng nhƣ phát minh ra một bộ đơn giản các lệnh gọi
là Ngôn ngữ đánh dấu siêu văn bản (HTML) để mô tả cấu trúc của một tài liệu.
HTML đƣợc khai sinh và nhanh chóng đƣợc mọi ngƣời đón nhận. Tháng 111994, trình duyệt Netscape ra đời và mau chóng thành cơng. Nó đƣa Web dễ tiếp cận
hơn với mọi ngƣời, nó phổ biến đến nỗi nhiều ngƣời nghĩ Netscape đã tạo nên web.
Cùng năm, tổ chức W3C đƣợc thành lập với mục đích đặt tiêu chuẩn cho ngơn ngữ
HTML. Sau này, với sự phát triển của Web, HTML nhanh chóng đƣợc nâng cấp,
HTML 3.2 đƣợc đƣa ra vào năm 1997, sau đó mùa xuân năm 1998 là HTML 4.0.
Cùng với sự phát triển của Internet, HTML 4.0 trở nên già cỗi, W3C tiếp tục
đƣa ra phiên bản 4.1 và 4.2 đƣợc gọi là XHTML (HTML + XML). Tuy nhiên mọi
chuyện chả đi dến đâu, lúc này HTML trở nên khó hiểu hơn so với ban đầu. Lúc này,
WHATWG( Web Hypertext Application Technology Working Group), một nhóm
nghiên cứu khác, đã tạo ra HTML5, đơn giản hơn, mạnh mẽ hơn. Sau này W3C đã
chọn HTML5 làm tiêu chuẩn cho Web.
1.2.

HTML5 và công nghệ của tương lai

Tháng 1/2008, phiên bản nháp đầu tiên của HTML5 đƣợc W3C cơng bố. Tuy
rằng chƣa đƣợc hồn thiện, nhƣng phiên bản thứ 5 này đã chứng tỏ đƣợc tầm quan
trọng của mình bằng các nhóm thẻ, thuộc tính, api mới,…
Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

5


Đồ án tốt nghiệp đại học

Với sự ra đời của HTML5 đã phần nào cải thiện đƣợc trải nghiệm của ngƣời
dùng khi sử dụng các website hoặc ứng dụng dùng HTML 5. Ngồi ra, nó cũng hỗ
trợ cho lập trình viên và nhà phát triển đỡ phải nhức đầu khi phải bị lệ thuộc quá
nhiều vào phía thứ 3 hoặc phải mất nhiều thời gian, cơng sức để tích hợp website,
ứng dụng của mình cho nhiều thiết bị khác nhau nhƣ Desktop, Smartphone, Tablet,
Tivi, Máy giặt,…
Ƣu điểm vƣợt trội của HTML5:
- Làm giảm tầm quan trọng của các plugin.
- Hỗ trợ đồ họa tƣơng tác.
- Tăng tính bảo mật.
- Đơn giản hóa việc thiết kế và code cùng với CSS và Javascript.
- Hoạt động xuyên suốt trên mọi nền tảng

1.3. Tìm hiểu về CSS
1.3.1. Giới thiệu tổng quan về CSS
Cascading Style Sheets (CSS) là những file hỗ trợ trình duyệt web trong việc
hiển thị một trang HTML. Các file CSS sẽ giúp cụ thể hóa các thành phần của trang
HTML nên đƣợc hiển thị nhƣ thế nào, nó cho phép bạn kiểm sốt phơng chữ, màu nền,
kiểu nền... CSS3 là phiên bản mới nhất của CSS hỗ trợ nhiều tính năng mới, giúp cho

việc thiết kế và xây dựng trang web trờ lên dễ dàng hơn.Việc thay đổi trạng thái của
Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

6


Đồ án tốt nghiệp đại học

một trang web đơn giản hơn khi bạn chỉ cần thay đổi trong một file CSS là đã có thể
thực hiện sự thay đổi này trên toàn bộ trang web. Phiên bản mới nhất hiện nay là CSS3.
Những ƣu điểm khi sử dụng CSS3:
- Làm tăng sức mạnh cho HTML. CSS kết hợp với HTML tạo nên một trang
web có kĩ thuật cao hơn và giao diện đẹp mắt hơn. Ngoài ra, khi sử dụng CSS sẽ giúp
sắp xếp các thành phần trong HTML nhƣ: div, header, footer , body… một cách khoa
học hơn.
- Giúp các website có sự đồng bộ tuyệt đối. Dù website có bao nhiêu trang đi
nữa thì bạn cũng chỉ phải định dạng một file CSS duy nhất. Khi bạn muốn phát triển
giao diện của website bạn chỉ phải thay đổi một trang duy nhất, các trang khác sẽ tự
động thay đổi theo.
- CSS tƣơng thích với hầu hết các trình duyệt.
Trong khuôn khổ đề tài, em sử dụng CSS để định dạng nền đồ họa Canvas cho
game 2D.
1.3.2. Cách thức sử dụng
Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của
bạn phía trong thẻ <head>…</head>, hoặc ghi nó ra file riêng với phần mở rộng “.css”,
ngồi ra bạn cịn có thể đặt chúng trong từng thẻ HTML riêng biệt. Tuy nhiên tùy từng
cách đặt khác nhau mà độ ƣu tiên của nó cũng khác nhau. Mức độ ƣu tiên của CSS sẽ
theo thứ tự sau: Style đặt trong từng thẻ HTML riêng biệt, Style đặt trong phần
<header>, style đặt trong các file mở rộng .css , style mặc định của trình duyệt.

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

7


Đồ án tốt nghiệp đại học

1.4. Tìm hiểu về Javascript
1.4.1. Tổng quan về Javascript
Lập trình game 2D trên nền tảng HTML sẽ đƣợc viết chủ yếu bằng Javascript
dựa trên nền tảng đồ họa của HTML5. Sau đây ta sẽ tìm hiểu về Javascrip.
Javascript (JS) là một ngơn ngữ lập trình kịch bản dự vào đối tƣợng phát triển
có sẵn hoặc tự định nghĩa ra, javascript đƣợc sử dụng rộng rãi trong các ứng dụng
Website. Javascript đƣợc hỗ trợ hầu nhƣ trên tất cả các trình duyệt nhƣ Firefox,
Chrome, ... thậm chí các trình duyệt trên thiết bị di động cũng phải hỗ trợ nó.
JavaScript chứa các thƣ viện tiêu chuẩn cho các đối tƣợng, ví dụ nhƣ: Array,
Date, và Math, và các yếu tố cốt lõi của ngôn ngữ lập trình nhƣ: tốn tử (operators),
cấu trúc điều khiển (control structures), và câu lệnh. JavaScript có thể đƣợc mở rộng
cho nhiều mục đích bằng việc bổ sung thêm các đối tƣợng.
1.4.2. Cách khai báo và sử dụng
Javascript có thể đƣợc tích hợp với HTML bằng cách chứa trong cặp thẻ
<script></script> trong tài liệu HTML
<script type="text/javascript" language="javascript">
Javascript code
</script>
Hoặc có thể đƣợc viết trong một file với phần đuôi mở rộng là .js (ví dụ:
main.js) rồi sau đó link vào tài liệu HTML bằng thẻ <script></script>
<script type="text/javascript" language="javascript" src="link to main.js"></script>

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

8


Đồ án tốt nghiệp đại học

CHƯƠNG 2
ĐỒ HỌA CANVAS TRÊN NỀN TẢNG HTML5
2.1. Các hàm API mới hỗ trợ lập trình game trên HTML5
2.1.1. Web Storage
HTML5 cung cấp một tính năng lƣu trữ dữ liệu tại client với dung lƣợng giới
hạn lớn hơn nhiều so với cookie. Tính năng này đƣợc gọi là Web Storage và đƣợc chia
thành hai đối tƣợng là localStorage và sessionStorage. Sau đây ta sẽ tìm hiểu các kiến
thức đầy đủ về sử dụng hai đối tƣợng này trong việc lập trình game.
Đầu tiên ta sẽ tìm hiểu qua cơng nghệ cookie để có thể thấy đƣợc điểm mạnh
của Web Storage. Cookie là một bộ nhắc nhở mà website lƣu trữ ở trên máy tính của
bạn có thể định danh cho bạn. Khi bạn truy cập và một trang web, website này sẽ đặt
một cookie tại trên máy đó, thay cho việc liên tục hỏi bạn các thơng tin nhƣ nhau,
chƣơng trình trên website có thể sao lƣu thông tin vào một cookie mà khi cần thơng tin
sẽ đọc cookie. Nếu khơng có cookie bạn sẽ phải nhập lại thơng tin của mình trên mỗi
màn hình web. Thông tin duy nhất mà cookie lƣu trữ là thông tin mà bản thân bạn chia
sẻ với website tạo ra cookie. Một website không thể đọc cookie của một công ty khác
trừ khi công ty kia cung cấp cho cơng ty đó chứa khóa giải thích ý nghĩa của cookie.
Mỗi cookie chỉ cho phép lƣu trữ tối đa 4KB và vài chục cookie cho một domain. Vì
thế cookie chỉ đƣợc dùng để lƣu trữ những thông tin đơn giản và ngắn gọn nhƣ email,
username,… giúp ngƣời dùng đăng nhập tự động vào trang web. Điều này khiến cho
những trang web muốn nâng cao hiệu suất làm việc bằng cách cache dữ liệu tại client
hầu nhƣ không thể thực hiện đƣợc.
Sự xuất hiện của Web Storage là một điểm nhấn cho việc ra đời các ứng dụng
web có khả năng tƣơng tác và nạp dữ liệu tức thì trên trình duyệt. Một hiệu quả nữa là

dung lƣơng truyền tải qua mạng có thể đƣợc giảm thiểu đáng kể. Ví dụ một ứng dụng
tra cứu sách trực tuyến, các sách đã đƣợc tra sẽ đƣợc lƣu lại trên máy của ngƣời dùng.
Khi cần tra lại, máy ngƣời dùng sẽ không cần kết nối đến server để tải lại những dữ
liệu cũ. Với những ứng dụng web có cơ sở dữ liệu nhỏ gọn, lập trình viên có thể thực
hiện việc cache “âm thầm” cơ sở dữ liệu xuống client và sau đó ngƣời dùng có thể
thoải mái tra cứu mà khơng cần request đến server.
- SessionStorage : giới hạn trong một cửa sổ hoăc thẻ của trình duyệt. Một trang
web đƣợc mở trong hai thẻ của cùng một trình duyệt cũng không thể truy xuất dữ liệu
lẫn nhau. Nhƣ vậy khi ta đóng trang web thì dữ liệu của sessionStorage cũng bị xóa đi.

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

9


Đồ án tốt nghiệp đại học

- LocalStorage: có thể truy xuất lẫn nhau giữa các cửa sổ trình duyệt. Dữ liệu sẽ
đƣợc lƣu trữ không giới hạn thời gian.
Trong khuôn khổ báo cáo đồ án, chỉ đề cập chủ yếu đến localStorage dùng để
lƣu trữ điểm số trò chơi (Score). Hiện nay các trình duyệt chrome, firefox, opera hay
safari đều hỗ trợ localStorage nên ta có thể khai báo hoặc khơng cần kiểm tra sự hỗ trợ
của trình duyệt đối với localStorage
If (typeof (Storage) !== "undefined") {
/*Có thể sử dụng localStorage/sessionStorage.*/
} else {
/* Trình duyệt khơng hỗ trợ Local storage.*/
}
Các phƣơng thức sử dụng:
- length: số lƣợng cặp key/value có trong đối tƣợng.

- key(n): trả về tên của key thứ n trong danh sách.
- getItem(key): trả về value đƣợc gắn với key.
- setItem(key,value): thêm hoặc gán một cặp key/value vào danh sách.
- removeItem(key): xóa cặp key/value khỏi danh sách.
- clear: xóa tồn bộ dữ liệu trong danh sách.
Ví dụ:
/*tạo 1 localStorage tên là website và giá trị là webname.com*/
localStorage.setItem("website", "webname.com");
/*lấy dữ liệu bằng phƣơng thức getElementById với id là result*/
document.getElementById("result").innerHTML = localStorage.website;
/* xóa website trong localStorage*/
localStorage.removeItem("website");
Có một lƣu ý là cả tên và giá trị đều đƣợc lƣu dƣới dạng chuỗi ký tự. Nếu muốn
sử dụng sử dụng ở định dạng khác (ví dụ kiểu số) thì ta phải chuyển đổi chúng.
2.1.2. Web SQL Database
Web SQL Database là một công nghệ kết hợp giữa trình duyệt và SQLite để hỗ
trợ việc tạo và quản lý database ở phía client. Các thao tác với database sẽ đƣợc thực
hiện bởi javasc ript và sử dụng các câu lệnh SQL để truy vấn dữ liệu.

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

10


Đồ án tốt nghiệp đại học

Lợi ích của SQLite là có để đƣợc tích hợp vào các ứng dụng với một thƣ viện
duy nhất để truy xuất đƣợc database. Chính vì vậy, bạn có thể sử dụng nó làm cơ sở dữ
liệu cho những ứng dụng nhỏ và không cần thiết cài đặt bất kì phần mềm hoặc driver
nào. Hiện tại Web SQL Database đƣợc hỗ trợ trong các trình duyệt Google Chrome,

Opera và Safari.
Trong javascript, bạn sử dụng các phƣơng thức chính sau để làm việc với Web
SQL Database :
- openDatabase: mở một database có sẵn hoặc tạo mới nếu nó chƣa tồn tại.
- transaction / readTransaction: hỗ trợ thực hiện các thao tác với database và
rollback nếu xảy ra sai sót.
- executeSql: thực thi một câu lệnh SQL.
2.1.3. Web Wroker
Với công nghệ phần cứng hiện nay, việc sử dụng đa luồng đã trở nên một phần
không thể thiếu trong các phần mềm. Tuy nhiên, công nghệ thiết kế web vẫn chƣa tận
dụng đƣợc sức mạnh này. Với các cơng việc địi hỏi một q trình xử lý lâu, lập trình
viên thƣờng phải sử dụng những thủ thuật nhƣ setTimeout(), setInterval(),… để thực
hiện từng phần công việc. Hiện nay, để giải quyết vấn đề này, một API mới dành cho
javascript đã xuất hiện với tên gọi Web Worker.
Đối tƣợng Web Worker đƣợc tạo ra sẽ thực thi trong một thread độc lập và chạy
ở chế độ nền nên không ảnh hƣởng đến giao diện tƣơng tác của trang web với ngƣời
dùng. Với đặc điểm này, bạn có thể sử dụng Web Workert các cơng việc địi hỏi thời
gian xử lý lâu nạp dữ liệu, tạo cache,…Điểm hạn chế của Web Worker là không thể
truy xuất đƣợc thành phần trên các đốitƣợng window, document hay parent. Mã lệnh
các công việc cần thực thi cũng phải đƣợc cách ly trong một tập tin scrip.
2.1.4. WindowAnimationTiming API
Trƣớc đây, cách truyền thống mà bạn dùng để tạo các hiệu ứng đồ họa chuyển
động với javascript là gọi liên tục công việc update và draw sau những khoảng thời
gian xác định thông qua phƣơng thức setInterval() hoặc setTimeout(). Mỗi lần gọi, một
frame (khung hình) mới sẽ đƣợc tạo ra và vẽ đè lên màn hình cũ. Vậy setInterval() và
setTimeout() cụ thể dùng để làm gì ?.
- Hàm setTimeout() dùng để thiết lập một khoảng thời gian nào đó sẽ thực hiện
một nhiệm vụ nào đó và nó chỉ thực hiện đúng một lần.
- Hàm setInterval() có cú pháp và chức năng giống nhƣ hàm setTimeout(), tuy
nhiên với hàm setInterval() thì số lần thực hiện lã mãi mãi.

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

11


Đồ án tốt nghiệp đại học

Khó khăn của phƣơng pháp này là khó xác định đƣợc giá trị thời gian thích hợp
dựa trên mỗi thiết bị đƣợc sử dụng (thơng thƣờng khoảng 60 fps – frames per second).
Ngoài ra với những hiệu ứng phức tạp thì việc update/draw có thể diễn ra lâu hơn so
với thời gian giữa hai lần gọi. Cách tổng quát để giải quyết vấn đề trên là thực hiện
tính tốn dựa vào khoảng cách thời gian giữa lần gọi trƣớc đó và hiện tại, sau đó xác
định bỏ qua một vài bƣớc draw hoặc thay đổi giá trị timeout cho phù hợp.
Cú pháp setTimeout và setInterval :
setTimeout (function, time) /* time được tính bằng miligiây*/
setInterval(function, time)
Thay vì đặt timeout để gọi các phƣơng thức vẽ lại hình ảnh, cách tốt nhất mà
bạn nên sử dụng để tạo các hiệu ứng chuyển động trên HTML5 là dùng API
WindowAnimationTiming, thơng qua phƣơng thức chính là requestAnimationFrame().
RequestAnimationFrame là một tính năng mới ra đời cho phép bạn đơn giản
hóa công việc, thay thế cho những hàm trƣớc đây ta thƣờng dùng là setTimeout hay
setInterval, trƣớc tiên ta sẽ sơ lƣợc qua về các cách thức tạo animation trong
javaScript. setInterval sẽ thực hiện lặp đi lặp lại mãi mãi với mỗi thời gian nhất định
cho tới khi ta gọi clearInterval để dừng nó. SetTimeout sẽ tạo delay trƣớc khi thực hiện
một chức năng nào đó kết hợp dùng đệ quy chúng ta cũng có lại cái lặp đi lặp lại mãi
mãi với mỗi thời gian nhất định.
Sự mƣợt mà của của ứng dụng animation dựa vào tỉ lệ khung hình trên mỗi
giây, thơng thƣờng các màn hình của chúng ta có tỷ lệ làm tƣơi là 60Hz nên chúng ta
có tỷ lệ khung hình nhanh nhất là 60fps, điều này có nghĩa trong javaScipt độ mƣợt tối

đa có thể thực hiện đƣợc khi gọi setInterval với một khoảng thời gian là khoảng 17ms
(1000ms / 60(fps) = 16.7ms).
Với requestAnimationFrame chúng ta khơng cịn phải khai báo thời gian cho
mỗi khung hình nữa mà đã đƣợc tối ƣu hóa dựa trên tỷ lệ làm tƣơi của màn hình, nó
tận dụng đƣợc sức mạnh của GPU giúp animation trở nên mƣợt mà hơn hẳn.
Vì mỗi trình duyệt sẽ có một tiếp đầu ngữ riêng nên cần phải kiểm tra trƣớc khi
dùng:
/* <sau đây là ví dụ khai báo từ game trong báo cáo> */

window.requestAnimFrame = (function(callback)
{
return window.requestAnimationFrame ||
Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

12


Đồ án tốt nghiệp đại học

window.webkitRequestAnimationFrame ||

/*kiểm tra với InternetExplore

window.mozRequestAnimationFrame ||

/*kiểm tra với Firefox*/

*/

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||
function(callback)
{
window.setTimeout(callback, 1000 / 60);
};
})();
Một hiệu quả khác các animation sẽ tự động dừng lại nếu tab chứa nó khơng
đƣợc hiển thị (khi bạn chuyển sang một tab khác của trình duyệt). Điều này giúp hạn
chế đƣợc tài nguyên sử dụng một cách hợp lý.
2.2. Đồ họa nền tảng HTML5 – Canvas 2D API
2.2.1. Khái niệm Canvas
Canvas là một phần tử của HTML5, cho phép thực hiện lập trình kết xuất đồ
họa các đối tƣợng hai chiều trên trang web. Canvas chiếm một khu vực trong trang
web với chiều rộng và chiều cao định trƣớc. Canvas sử dụng JavaScript để vẽ đồ họa
trực tiếp trên trang web. Đây là vùng chữ nhật mà bạn định nghĩa và điều khiển và nó
cho phép dựng hình 2D và hình ảnh bitmap động, theo bảng kịch bản lệnh.
Canvas HTML5 rất lý tƣởng để sản xuất tài liệu hình ảnh thú vị nhằm nâng cao
các giao diện ngƣời dùng, các bản vẽ, các album ảnh, các biểu đồ, các đồ thị, các hình
ảnh động, và các ứng dụng bản vẽ nhúng, các ứng dụng game. Phần tử Canvas có một
số phƣơng thức để vẽ các đƣờng, hình chữ nhật, hình trịn, và các nhân vật.
Những ƣu điểm của Canvas:
- Tính tƣơng tác: canvas là hồn tồn tƣơng tác. Nó có thể đáp ứng với những
hành động của ngƣời dùng bằng cách lắng nghe sự kiện bàn phím, chuột, hoặc liên lạc.
Vì vậy, một nhà phát triển khơng giới hạn chỉ có đồ họa tĩnh và hình ảnh.
- Animation: Mỗi đối tƣợng đƣợc vẽ trên canvas có thể đƣợc hoạt hình. Điều
này cho phép tất cả các cấp độ của hình ảnh động đƣợc tạo ra, từ những quả bóng nảy
đơn giản đến phức tạp về phía trƣớc và chuyển động đảo ngƣợc.

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

13


Đồ án tốt nghiệp đại học

- Tính linh hoạt: Các nhà phát triển có thể tạo ra bất cứ thứ gì bằng canvas. Nó
có thể hiển thị các dịng, hình dạng, văn bản, hình ảnh,…có hoặc khơng có hình ảnh
động. thêm video hoặc âm thanh đến một ứng dụng canvas cũng có thể làm đƣợc.
- Hỗ trợ đa nền tảng: HTML5 Canvas đƣợc hỗ trợ bởi tất cả các trình duyệt
chính và có thể đƣợc truy cập vào một loạt các thiết bị bao gồm cả máy tính để bàn,
máy tính bảng và điện thoại thơng minh.
- Phổ biến: Canvas đƣợc phổ biến nhanh chóng và ổn định phát triển nên khơng
có tình trạng thiếu nguồn lực sẵn có.
- Là một tiêu chuẩn web: Không giống nhƣ Flash và Silverlight, Canvas là cơng
nghệ mở - đó là một phần của HTML5.
- Xây dựng một lần, chạy ở mọi nơi: HTML5 Canvas cung cấp tính di động
tuyệt vời. Sau khi tạo ra, không giống nhƣ Flash và Silverlight, một ứng dụng canvas
có thể chạy gần nhƣ bất cứ nơi nào – từ các máy tính lớn nhất cho các thiết bị di động
nhỏ nhất.
- Công cụ phát triển tự do và dễ tiếp cận: Các công cụ cơ bản cho việc tạo ra
các ứng dụng HTML5 canvas chỉ là một trình duyệt và một trình soạn thảo code tốt.
Thêm vào đó, có rất nhiều thƣ viện lớn và miễn phí và các công cụ để giúp phát triển
với sự phát triển canvas cao cấp.
2.2.2. Ứng dụng của Canvas
- Ứng dụng quảng cáo: HTML5 Canvas là một thay thế tuyệt vời cho các biểu
ngữ dựa trên Flash và quảng cáo. Nó có tất cả các tính năng cần thiết cho việc thu hút
sự chú ý của ngƣời mua.
- Lập trình game: HTML5 canvas là một mơi trƣờng lí tƣởng để xây dựng cho
tất cả các game 2D và 3D.
2.2.3. Khai báo và sử dụng Canvas

Canvas là một thẻ HTML5 tƣơng tự nhƣ những thẻ HTML khác, tuy nhiên có
một sự khác biệt rõ rệt nhât là nội dung của Canvas lại đƣợc xây dựng từ Javascript.
Để sử dụng Canvas thì bạn phải đặt thẻ <canvas> </canvas> tại vị trí muốn hiển thị,
sau đó sử dụng các API mà HTML5 cung cấp dùng để thao tác với các đối tƣợng bên
trong Canvas (line, circle, ...).
Để đặt bất cứ thứ gì trên canvas (khung nền ảnh), trƣớc tiên bạn phải định nghĩa
canvas trong tệp HTML. Bạn phải tạo mã JavaScript để truy cập thẻ <canvas> và giao
tiếp với Canvas API của HTML5 để vẽ hình ảnh của bạn.
Khai báo chính của canvas:
Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

14


Đồ án tốt nghiệp đại học

<canvas id="myCanvas" width="độ rộng" height="độ cao"></canvas>

Một phần tử canvas có hai thuộc tính riêng của nó: width (chiều rộng) và height
(chiều cao). Ngồi ra, phần tử canvas cịn sở hữu tất cả các thuộc tính HTML5 quan
trọng, chẳng hạn nhƣ class (lớp), id (mã định danh), và name (tên). Thuộc tính id
thƣờng dùng trong các mã đƣợc hiển thị ở trên. JavaScript sử dụng id của phần tử
canvas đƣợc tạo ở đây để xác định phần tử canvas để vẽ lên. JavaScript xác định phần
tử canvas thích hợp bằng cách sử dụng phƣơng thức document.getElementById(), nhƣ
đƣợc hiển thị dƣới đây.
var canvas = document.getElementById("myCanvas");

Mỗi phần tử canvas phải có một định nghĩa ngữ cảnh, nhƣ hình dƣới đây. Hiện
nay, đặc tả chính thức chỉ cơng nhận môi trƣờng 2D
var context = canvas.getContext("2d");

Sau khi xác định phần tử canvas và xác định rõ ngữ cảnh của nó, ta đã có thể
sẵn sàng bắt đầu vẽ. Khi sử dụng Canvas phải hiểu đƣợc sự khác biệt giữa các phần tử
của Canvas và nội dung của nó. Phần tử Canvas chỉ là một thẻ HTML thông thƣờng
nhƣng nội dung của nó là một tập hợp các đối tƣợng tạo nên một Graphic. Đây là điểm
đặc trƣng nhất của Canvas. Và khi hiển thị lên trình duyệt thì Canvas sẽ hiển thị ở
dạng hình ảnh .png

Canvas là hình chữ nhật trên trang và có thể sử dụng JavaScript để vẽ bất cứ
điều gì ta muốn. HTML5 định nghĩa một tập các chức năng (canvas API) để vẽ hình
dạng, xác định đƣờng dẫn.HTML5 Canvas là một JavaScript API để mã hóa các bản
vẽ. Canvas API cho phép định nghĩa một đối tƣợng canvas nhƣ là thẻ <canvas> trên

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

15


Đồ án tốt nghiệp đại học

trang HTML ,chúng ta có thể vẽ bên trong. Nó là một khối khơng gian vơ hình, mặc
định là 300x250 pixels (trên tất cả trình duyệt). Chúng ta có thể vẽ cả hình 2D và 3D
(WebGL). 2D có sẵn trong tất cả các trình duyệt Web hiện đại. Hiện nay 3D chƣa
đƣợc hỗ trợ nhiều và đầy đủ, tƣơng lai sẽ đƣợc cập nhật nhiều hơn, nên em chỉ tìm
hiểu nền tảng Canvas 2D. Canvas 2D cung cấp một API đơn giản nhƣng mạnh mẽ để
có thể vẽ một cách nhanh chóng trên bề mặt bitmap 2D. Khơng có định dạng tập tin,
và chỉ có thể vẽ bằng cách sử dụng script. Khi vẽ trên canvas là ta đang vẽ pixels,
không phải vectơ và chỉ là các điểm ảnh đƣợc ghi nhớ.
+ Các tọa độ canvas:
Một điều kiện tiên quyết để vẽ trên canvas (khung nền ảnh) là phải biết rõ về

vùng lƣới hoặc vùng tọa độ. Các phép đo vùng khung nền này theo chiều rộng và
chiều cao đƣợc tính bằng pixel (điểm ảnh). Canvas đƣợc dựng lên xung quanh việc sử
dụng các tọa độ x và y. Các tọa độ của canvas tại x=0, y=0 nằm ở góc trên bên trái.
Các thuộc tính mặc định cho vùng hình chữ nhật của canvas có chiều rộng là 300
pixels và chiều cao là 150 pixels, nhƣng bạn có thể xác định kích thƣớc chính xác của
phần tử canvas này bằng cách quy định chiều rộng và chiều cao. Bản vẽ trong hình
dƣới đây cho thấy cách triển khai thực hiện tọa độ x và y .

+ Nạp và vẽ ảnh:
Để vẽ một ảnh ra canvas, ta tạo một đối tƣợng image và thực hiện phƣơng thức
context.drawImage() trong sự kiện load của image. Nhƣ vậy để đảm bảo rằng hình ảnh
chỉ đƣợc vẽ sau khi đã đƣợc nạp hoàn tất. Ngoài ra, bạn nên đặt sự kiện load trƣớc khi

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

16


Đồ án tốt nghiệp đại học

gán đƣờng dẫn cho ảnh. Nếu khơng image có thể đƣợc load xong trƣớc khi bạn gắn sự
kiện load cho nó.
Phƣơng thức drawImage() sử dụng để hiển thị ảnh, tranh hoặc video trong
canvas. Phƣơng thức này cũng có thể hiển thị một phần của ảnh, và /hoặc tăng /giảm
kích cỡ ảnh.
Vị trí của ảnh trên canvas và chỉ định chiều rộng và chiều cao của ảnh:
context.drawImage(Img, X, Y, ,width, height);

Cắt ảnh và hiển thị phần vừa cắt lên một vị trí trong canvas:
context.drawImage(img, sx, sy, swidth, sheight, X, Y, width,height);

Các tham số:
- Img: ảnh đƣợc sử dụng.
- X,Y: tọa độ để hiển thị ảnh trong canvas.
- sx, sy: tọa độ điểm x,y bắt đầu cắt ảnh.
- width, height: chiều rộng,chiều cao của ảnh.
- swidth, sheight: chiều rộng,chiều cao của ảnh đƣợc cắt.
Ví dụ:
window.onload = function()
{

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function()

{
context.drawImage(img, 10, 10,50,50);
};
img.src = "image.png";
};
+ thao tác với pixel
Một ảnh bao gồm một mảng các pixel với các giá trị red, green, blue và alpha
(RGBA). Trong đó alpha là giá trị xác định độ mờ đục (opacity) của ảnh. Giá trị alpha
Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

17


Đồ án tốt nghiệp đại học

càng lớn thì độ màu sắc càng rõ nét và màu sắc sẽ trở nên trong suốt nếu alpha là 0
(giá trị cao nhất là 255).
Trong Canvas 2D API, dữ liệu ảnh đƣợc lƣu trong một đối tƣợng ImageData
với 3 thuộc tính là width, height và data. Trong đó data là một mảng một chiều chứa
các pixel. Mỗi pixel chứa 4 phần tử tƣơng ứng là R,G,B,A. Nhƣ vậy với một ảnh có
kích thƣớc 10×20 ta sẽ có 200 pixel và có 200*4=400 phần tử trong mảng
ImageData.data.
2.2.4. Bắt sự kiện con trỏ chuột
Một số sự kiện con trỏ chuột trong javascript sử dụng trên nền canvas
Onmouseover

Xảy ra khi con trỏ chuột bắt đầu đi vào thẻ html

Onmouseout

Xảy ra khi con trỏ chuột rời khỏi thẻ html

Onmousemove

Xảy ra khi con trỏ chuột di chuyển bên trong thẻ html

Onclick

Xảy ra khi click con trỏ chuột vào thẻ html

Ondbclick

Xảy ra khi double click con trỏ chuột vào thẻ html

Để xác định đƣợc tọa chuột trên canvas, ta sẽ sử dụng tham số của các sự kiện
nhƣ mousedown, mousemove, … Tham số của các sự kiện này chứa tọa độ chuột lƣu
trong hai biến avtarX và avartaY. (tọa độ này chính mà mainchar-máy bay chính trong
game, gắn liền với sự kiện mouseMovement)
Ví dụ:
- khai báo đầu game demo
id=”gameCanvas” onClick=”changeState()”;width=”800” height=”550”>
</canvas>
- Bắt sự kiện di chuyển con trỏ chuột
function MouseMovement(mouseEvent)
{ avatarX = mouseEvent.offsetX;
avatarY = mouseEvent.offsetY; }
2.2.5. Các công cụ vẽ đồ họa trên canvas
2.2.5.1. Các đường vẽ

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

18


Đồ án tốt nghiệp đại học

Để vẽ một đƣờng trên canvas,ta sử dụng các phƣơng thức moveTo(), lineTo(), và
stroke(). Ngoài ra, bạn sử dụng phƣơng thức beginPath() để thiết lập lại đƣờng dẫn hiện tại:
- Context.beginPath();
- Context.moveTo(x,y);
- Context.lineTo(x,y);
- Context.stroke(x,y);
Phƣơng thức beginPath() bắt đầu một đƣờng dẫn mới. Trƣớc khi bạn vẽ một

đƣờng kẻ mới với các đƣờng dẫn nhỏ khác nhau, bạn phải sử dụng phƣơng thức
beginPath() để cho biết rằng một điểm khởi đầu mới cho hƣớng đi của bản vẽ. Không
cần phải gọi phƣơng thức beginPath() khi bạn vẽ đƣờng thẳng đầu tiên.
Phƣơng thức moveTo() cho biết nơi bắt đầu đƣờng dẫn nhỏ mới. Phƣơng thức
lineTo() tạo các đƣờng dẫn nhỏ. Bạn có thể thay đổi sự xuất hiện của đƣờng kẻ bằng
các phần tử lineWidth và strokeStyle. Phần tử lineWidth thay đổi độ dày của đƣờng
này, và strokeStyle thay đổi màu sắc.
Ví dụ : đầu tiên ta thiết lập một đƣờng dẫn mới để bắt đầu: context.beginPath().
Tiếp theo là các lệnh:
- context.moveTo(50, 50), đặt điểm đầu cho đƣờng dẫn này (x=50, y-50).
- context.lineTo(300,50), xác định điểm cuối cho đƣờng kẻ này.
- context.lineWidth = 10, là độ rộng của đƣờng kẻ này.
- context.strokeStyle = "#0000FF", là màu sắc của đƣờng kẻ này.
- context.lineCap = "round", làm tròn các đầu đƣờng kẻ.
- context.stroke(), thực sự vẽ đƣờng kẻ này trên canvas.
Kết quả ta thu đƣợc:

Mũ ghép là giá trị mặc định. Khi bạn sử dụng một kiểu mũ tròn hoặc hình
vng, chiều dài của đƣờng kẻ này tăng lên một lƣợng đúng bằng chiều rộng của
đƣờng kẻ này. Ví dụ, một đƣờng kẻ dài 200 pixel và rộng 10 pixel có kiểu mũ trịn
hoặc vng sẽ có chiều dài đƣờng kẻ là 210 pixel, bởi vì mỗi nắp sẽ bổ sung thêm 5
pixel cho mỗi đầu của đƣờng kẻ này. Một đƣờng kẻ dài 200 pixel và rộng 20 pixel có

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

19


Đồ án tốt nghiệp đại học

kiểu mũ trịn hoặc vng sẽ có chiều dài đƣờng kẻ kết quả là 220 pixel, vì mỗi mũ sẽ
thêm 10 pixel cho mỗi đầu của đƣờng kẻ này.
2.2.5.2. Vẽ các hình chữ nhật
Có ba phƣơng thức để vẽ và xử lí một vùng hình chữ nhật trên canvas:
- fillRect(x,y,width,height), vẽ một hình chữ nhật.
- strokeRect(x,y,width,height), vẽ nét ngồi của một hình chữ nhật.
- clearRect(x,y,width,height), xóa vùng cụ thể làm cho nó trong suốt.
Ví dụ:
context.fillRect(25,25,50,50);
context.clearRect(35,35,30,30);
context.strokeRect(100,100,50,50);
Kết quả ta đƣợc :

Phƣơng thức fillRect() tạo ra một hình chữ nhật đƣợc tô đầy bằng màu đen mặc
định. Phƣơng thức clearRect() xóa một vùng hình chữ nhật ở giữa hình chữ nhật đầu
tiên. Đó là cùng giữa hình chữ nhật đƣợc hình thành bởi phƣơng thức fillRect().
Phƣơng thức strokeRect tạo ra một hình chữ nhật chỉ có đƣờng viền màu đen nhìn thấy
đƣợc.
2.2.5.3. Vẽ các đường cong,hình trịn và bán nguyệt
Cả hai hình trịn và hình bán nguyệt đều sử dụng phƣơng thức arc().
Phƣơng thức arc() có sáu đối số:
context.arc(X, Y, radius, startingAngle, endingAngle, antiClockwise);
Các đối số X và Y là các tọa độ của tâm hình trịn. Đối số radius (bán kính)
giống nhƣ với tốn học là: một đƣờng thẳng từ tâm đến chu vi. Cung đƣợc tạo ra sẽ là
một phần của hình trịn đã định. Các đối số startAngle và endAngle tƣơng ứng là điểm
đầu và điểm cuối của cung tính bằng radian. Đối số anticlockwise (ngƣợc chiều kim
đồng hồ) là một giá trị Boolean. Khi giá trị này true (đúng) thì cung đƣợc vẽ ngƣợc
chiều kim đồng, khi là false (sai) thì cung đƣợc vẽ theo chiều kim đồng hồ.

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

20


Đồ án tốt nghiệp đại học

Để vẽ một hình trịn bằng phƣơng thức arc(), hãy định nghĩa góc đầu là 0 và
góc cuối là 2*PI, nhƣ đƣợc hiển thị dƣới đây.
context.arc(X, Y, radius, 0, 2 * Math.PI, false);

Để vẽ một hình bán nguyệt bằng phƣơng thức arc(), hãy xác định góc cuối là
startingAngle + PI, nhƣ đƣợc hiển thị dƣới đây.
context.arc(X, Y, radius, startingAngle, startingAngle + Math.PI, false);

2.2.5.4. Các phép biến đổi tỉ lệ, tịnh tiến, quay tròn
Các phƣơng thức translate(), scale(), và rotate() tất cả đều sửa đổi ma trận hiện
tại. Phƣơng thức translate(x, y) di chuyển các mục trên canvas đến một điểm khác trên
lƣới. Trong phƣơng thức translate(x,y), các tọa độ (x,y) cho biết số điểm ảnh mà ảnh
nên đƣợc di chuyển theo hƣớng -x và số điểm ảnh mà ảnh phải đƣợc di chuyển theo
hƣớng -y.
Nếu bạn vẽ một ảnh tại (15,25) bằng phƣơng thức drawImage(), bạn có thể sử
dụng phƣơng thức translate() có các đối số (20,30), để đặt ảnh này ở vị trí (15+20,
25+30) = (35, 55).
Phƣơng thức scale(x,y) thay đổi kích thƣớc của một ảnh. Đối số x xác định rõ
hệ số tỷ lệ theo chiều ngang, và đối số y xác định rõ hệ số tỷ lệ theo chiều dọc. Ví dụ,
scale(1.5, .75) sẽ tạo một ảnh lớn hơn 50% theo hƣớng x và chỉ bằng 75% kích thƣớc
hiện tại theo hƣớng y. Phƣơng thức rotate(angle) chuyển đổi một đối tƣợng dựa trên
góc đã định.
2.2.5.5. Cắt ảnh
Có thể thay đổi các ảnh bằng cách cắt các vùng đã chọn bên ngoài chúng. Cắt

trên canvas là một hàm chất tải lên phƣơng thức drawImage(). Phƣơng thức
drawImage() có ba tùy chọn. có thể sử dụng hoặc ba, năm, hoặc chín đối số.
- Cấu hình ba đối số : drawImage(image, dx, dy) - vẽ ảnh này trên canvas ở tọa
độ đích (dx, dy). Các tọa độ này thiết lập góc trên bên trái của hình ảnh.
- Cấu hình năm đối số : drawImage(image, dx, dy, dw, dh) - đƣa ra chiều rộng
và chiều cao của ảnh đích. Hình ảnh này đƣợc điều chỉnh để phù hợp với chiều rộng và
chiều cao của đích này
- Cấu hình chín đối sốdrawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) - lấy
một hình ảnh, cắt rời ra một vùng hình chữ nhật bắt đầu ở các tọa độ nguồn (sx,sy) với
Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

21


Đồ án tốt nghiệp đại học

chiều rộng và chiều cao (sw,sh), và điều chỉnh nó cho phù hợp với chiều rộng và chiều
cao (dw,dh) của đích này, đặt nó trên canvas tại (dx,dy).
2.2.5.6. Viết chữ
Một số thuộc tính quan trọng đƣợc sử dụng khi vẽ chữ bằng canvas:
- font: chỉ định font chữ.
- fillText(text, x, y): Vẽ chữ (text đã đƣợc đổ màu) vào canvas tại tọa độ
(x,y).Mặc định là màu đen.
- StrokeText(text, x, y) : Vẽ chữ (text không đổ màu) tại tọa độ ( x, y).
- textBaseline: Thiết lập trả về đƣờng cơ sở hiện tại của chữ (top,…).
- textAlign: Thiết lập trả về vị trí căn lề của nội dung.
Ví dụ:
gameContext.font = "24px Arial";
gameContext.textBaseline = "top";
gameContext.textAlign = "center";

gameContext.fillStyle = "white";
gameContext.fillText("helloword!!!",300, 300);
3.2.5.7 Đổ bóng – Gradients
Gradients (đổ bóng) có thể đƣợc sử dụng để đổ màu cho các hình chữ nhật,
vịng trịn, đƣờng kẻ, chữ,.. có 2 kiểu khác nhau của đổ bóng là createLinearGradient
và createRadialGradient .
- createLinearGradient(x,y,x1,y1) - Tạo ra một đổ bóng đều (tuyến tính).
- createRadialGradient(x,y,r,x1,y1,r1) - Tạo ra một đổ bóng xuyến/hình trịn.
Ví dụ dùng createLinearGradient đổ bóng
c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0,0,200,0); // Tạo gradient
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;

// Đổ màu cho gradient

ctx.fillRect(10,10,150,80);

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

22


Đồ án tốt nghiệp đại học

Kết quả ta thu đƣợc :

Ví dụ sử dụng createRadialGradient :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Tạo gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Đổ màu cho gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
Kết quả ta thu đƣợc

Trên đây là một số phƣơng thức chính để thực hiện tạo lập nền đồ họa trong
canvas HTML5. Tiếp theo Chƣơng 4 em sẽ trình bày chi tiết quá trình tạo hiệu ứng
chuyển động của các đối tƣợng đồ họa, nắm bắt và xử lí các sự kiện (event) bằng
javascrip.

Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT

23