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

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.. Khô

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 đã hoàn thành đề

tài này Trong quá 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

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.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 toá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

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

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

11-1994, 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 hoàn thiện, nhưng phiên bản thứ 5 này đã chứng tỏ được tầm quan

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 Ngoà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 soá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

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”, ngoà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

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ƣ: toá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>

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

- 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") {

- 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 toàn bộ dữ liệu trong danh sách

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

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 quá 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

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 toá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

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) {

window.webkitRequestAnimationFrame || /*kiểm tra với InternetExplore

};

})();

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à hoàn toà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

- 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

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

<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) Ngoà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

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