nghiên cứu về canvas trong html5 và xây dựng thư viện vẽ đồ thị sử dụng canvas

Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
MỤC LỤC
DANH MỤC HÌNH VẼ 2
Lời mở đầu 4
Chương 1. Tổng quan về HTML 6
1.1.Tổng quan về HTML 6
1.1.1.Lịch sử HTML 6
1.3.1.Thuộc tính: 14
1.3.2.Phương thức: 14
1.3.3.Cấu Trúc 15
Chương 2. Nghiên Cứu Về Canvas 15
2.2.Giới thiệu về vẽ đồ họa 2D bằng canvas 16
2.3.Các Kĩ thuật vẽ 2D trên Canvas 18
2.3.1.Đường thẳng và đa giác 18
2.3.2.Thuộc tính đồ họa 20
2.3.3.Hệ tọa độ 21
2.3.4.Đường cong 24
2.3.5.Hình chữ nhật 26
2.3.6.Màu sắc, độ mờ, Gradients và Patterns 27
2.3.7.Thuộc tính của đường thẳng 30
2.3.8.Kí tự 31
2.3.9.Đổ bóng 32
2.3.10. Hình ảnh 33
2.3.11. Vị trí hiển thị (Compositing) 35
2.4.Các ứng dụng vẽ canvas phổ biến 39
2.4.1.Vẽ đồ thị 39
2.4.2.Vẽ hình ảnh minh họa 40
2.4.3.Game sử dụng canvas 40
Chương 3. Ứng dụng xây dụng thư viện vẽ đồ thị sử dụng Canvas 42
3.1.Giới thiệu về thư viện 42
SVTH: Nguyễn Hữu Luật 1 MSV: CQ491688

Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
3.2.Ý nghĩa của thư viện 42
3.3.Mục đích hướng tới 42
3.4.Các kĩ thuật và chức năng của thư viện 43
3.4.1.Thu Nhỏ kích cỡ nếu kích thước canvas không phù hợp với đồ thị 43
3.4.2.Thay đổi các giá trị mặc định trong thư viện 44
3.4.3.Xây dựng các hàm dùng trong thư viện 47
3.5.Cài đặt và sử dụng thư viện 49
3.6.Các loại đồ thị khác 50
3.7.Chiến lược phát triển 51
3.8.Đánh giá và so sánh 51
3.8.1.Ưu điểm: 51
3.8.2.Nhược điểm: 51
3.9.Thử nghiệm trên các trình duyệt 52
Kết Luận 54
Các Tài Liệu Tham Khảo 55
DANH MỤC HÌNH VẼ
Hình 1: Các trình duyệt hỗ trợ HTML5và CSS3 12
Hình 2 : Hình ảnh IE8 khi sử dụng excanvas.compiled.js 17
Hình 3: Minh họa vẽ đường Path 19
Hình 4: Hệ tọa độ 24
Hình 5: Hình minh họa cho phương thức bezierCurveTo() 25
Hình 6: Hình minh họa cho phương thức quadraticCurveTo() 25
SVTH: Nguyễn Hữu Luật 2 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Hình 7: Ví dụ vẽ đường cong 26
Hình 8: Vẽ hình chữ nhật 27
Hình 9: Pattern và gradients 29
Hình 10: Hình ảnh minh họa cho lineCap và lineJoin 31
Hình 11: Thuộc tính textAlign và textBaseLine 32

Hình 12: Minh họa phương thức đổ bóng 33
Hình 13: Minh họa cho drawImage() 35
Hình 14: Đồ thị hình tròn 39
Hình 15: Đồ thị hình cột 40
Hình16: Hình ảnh minh họa 40
Hình17: Game nuôi cá 41
Hình18: Hình ảnh trước và sau khi sử dụng hàm scale(rate,rate) 44
Hình 19: Các kiểu kí hiệu cho mốc dữ liệu 45
Hình20: Tham số TextWidth = 20, quá nhỏ nên gây ra lỗi 47
Hình 21: Thử nghiệm hiển thị trên các trình duyệt 52
Hình 22: So sánh trình duyệt Opera với Chrome 53
Hình 23: Đồ thị hiển thị với IE8 53
SVTH: Nguyễn Hữu Luật 3 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Lời mở đầu
Hiện nay với sự phát triển của khoa học công nghệ cũng như công nghệ
thông tin, thì việc cập nhật, sử dụng và phát triển các công nghệ mới luôn là việc
quan trọng. Vì những công nghệ mới được tạo ra sẽ rút được những kinh nghiệm từ
những công nghệ đã cũ, lỗi thời, đồng thời tạo ra nhưng tiến bộ mới cho công nghệ
tương lai. HTML5 ra đời cũng vậy, nó sử dụng những công nghệ mới, với những
ứng dụng thực sự tốt cho các nhà phát triển web. HTML5 đã phát triển các công
nghệ mới thuận tiện, và tốt hơn cho người phát triển web. HML5 với nhiều tính
năng nổi trội và dễ sử dụng. HTML5 hiện nay còn được kì vọng là sẽ thay thế Flash
trong tương lai, cũng như sẽ được công nhận là một chuẩn cho web mới. Như vậy
HTML5 hiện nay rất được chú ý bởi các tính năng sử dụng nổi bật, và đang được
chờ đợi để tạo ra một sự đột phá lớn trong công cuộc phát triển web.
Hiện nay sự phát triển không ngừng của HTML5 cũng như các công nghệ
khác đi kèm nó đang nhận được sự quan tâm nhiều của các nhà phát triển web. Một
công nghệ trong HTML5, nhận được nhiều sự chú ý đến hiện nay là việc sử dụng
thẻ <canvas> để triển khai vẽ đồ họa ngay trên máy khách, thay cho việc tải hình

ảnh hay vẽ đồ họa trên máy chủ như bình thường. Đây là một công nghệ mang lại
nhiều những tiện ích cũng như sẽ đóng góp to lớn cho sự phát triển của thế giới
web. Vì những tiện ích lớn của công nghệ HTML5 cũng như công nghệ về vẽ đồ
họa trên máy khách hiện nay, nên em đã chọn chủ đề nghiên cứu cho chuyên đề tốt
nghiệp của em là:
Nghiên cứu về Canvas trong HTML5
và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Bài viết sẽ nghiên cứu về các tính năng sử dụng của Canvas trong HTML5, và xây
dựng thư viện dùng để vẽ đồ thị trên nền web sử dụng thẻ Canvas trong HTML5 và
JavaScript.
SVTH: Nguyễn Hữu Luật 4 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Chuyên đề nghiên cứu này hoàn thành được là nhờ công lao to lớn của các thầy cô
trong trường Kinh Tế Quốc Dân nói chung và các thầy cô trong bộ môn Công
Nghệ Thông Tin nói riêng. Em xin gửi lời cám ơn sâu sắc tới toàn bộ các thầy cô
trong trường đã truyền đạt kiến thức cũng như kinh nghiệm cho em trong suốt
những năm rèn luyện trong trường. Em cũng xin cám ơn thầy Trần Xuân Lâm –
giảng viên của bộ môn Công Nghệ Thông Tin đã trực tiếp hướng dẫn, chỉ bảo tận
tâm để em có thể hoàn thành được chuyên đề này. Do thời gian làm chuyên đề có
hạn, cùng kiến thức còn hạn chế của bản thân nên bài chuyên đề còn có nhiều thiếu
sót, rất mong sự đóng góp của thầy cô và các bạn.
Sinh viên thực hiện:
Nguyễn Hữu Luật
SVTH: Nguyễn Hữu Luật 5 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Chương 1. Tổng quan về HTML
1.1. Tổng quan về HTML
1.1.1. Lịch sử HTML
HTML (viết tắt 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, nghĩa là các mẩu thông tin được trình bày trên World Wide Web. Được định
nghĩa như là một ứng dụng đơn giản của SGML (Viết tắt của Standard Generalized
Markup Language) , vốn đượ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 giờ đây đã trở thành một chuẩn Internet do tổ chức World
Wide Web Consortium (W3C) duy trì [1]. HTML ra đời từ những năm 1989, do
Tim Berners-Lee phát triển, sau đó nhanh chóng phổ biến nhờ tính dễ học và dễ sử
dụng. HTML sử dụng các tag để đánh dấu từng đoạn văn bản. Một ví dụ đơn giản
như:
<p> This is a paragraph </p>
Phiên bản HTML đầu tiên của Tim Berners-Lee rất khác với những gì đang sử dụng
ngày nay, chẳng hạn như thiếu hẳn các chức năng định dạng văn bản. Tuy nhiên
nhờ sự đơn giản của các tag này mà HTML được chấp nhận rộng rãi, và được đưa
lên thành chuẩn. Trong vòng tám năm (1989 – 1997) , HTML đã phát triển qua bốn
cột mốc chính, với phiên bản gần đây 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 [2]. Tuy nhiên,
HTML hiện không còn được phát triển tiếp, và đã được thay thế bằng XHTML.
Dùng HTML động hoặc Ajax, có thể được tạo ra và xử lý bởi số lượng lớn các công
cụ, từ một chương trình soạn thảo văn bản đơn giản – có thể gõ vào ngay từ những
dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYG phức tạp.
Lịch sử phát triển của ngôn ngử HTML, trải qua nhiều giai đoạn, nhưng tiêu biểu là
các mốc phát triển như sau[3]:
SVTH: Nguyễn Hữu Luật 6 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
• 1990 – 1991: HTML xuất hiện với cái tên HTML Tags.
• 1994: HTML2 ra đời.
• 1996: Đánh dấu năm thành công khi có sự phát triển của bộ 3 công nghệ
đóng góp vào sự phát triển của Web là HTML3, CSS và JAVASCRIPT.
• 1998: HTML4 cùng CSS2 ra đời.
• 2000: Thời kì kết thúc của HTML4 và thay thế vào đó là một chuẩn khác
là XHTML với phiên bản XHTML1.0

• 2002: XHTML2 dần được phát triển, cùng với một số ứng dụng như
trong HTML5 bây giờ ví dụ như <canvas>, và cũng trong năm này có sự
xuất hiện khái niệm Tableless Web Design.
• 2005: XHTML2 vẫn được sử dụng rộng rãi, và năm này cũng đánh dấu
sự ra đời của Ajax.
• 2008: Với sự ra đời của HTML5 với nhiều kì vọng cho các nhà phát triển
Web.
Năm 2000 có sự xuất hiện của XHTML, và nó đã hoàn toàn thay thế HTML trong
việc phát triển Web. Thực ra XHTML là một ngôn ngữ đánh dấu có cùng các khả
năng như HTML, nhưng có cú pháp chặt chẽ hơn. XHTML 1.0 là Khuyến cáo
của World Wide Web Consortium (W3C) vào ngày 26 tháng 2, 2000.
Chính sự chặt chẽ hơn trong cấu trúc đã làm cho XHTML trở nên phổ biến là trở
thành một chuẩn cho thiết kế Web được W3C công nhận. Nỗ lực tách phần nội
dung ra khỏi phần hình thức trình bày của trang HTML đã đưa đến sự xuất hiện của
chuẩn mới là XHTML. Chuẩn này nhấn mạnh vào việc sử dụng thẻ đánh dấu vào
việc xác định cấu trúc tài liệu như phần đề mục, đoạn văn, khối văn bản trích dẫn và
các bảng, chứ không khuyên dùng các thẻ đánh dấu mang tính chất trình bày trực
quan, như <font>, <b> (in đậm) , và <i> (in nghiêng) . Những mã mang tính chất
trình bày đó đã được loại bỏ khỏi HTML 4.01 Strict và các đặc tả XHTML nhằm
SVTH: Nguyễn Hữu Luật 7 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
tạo điều kiện cho CSS. CSS cung cấp một giải pháp giúp tách cấu trúc HTML ra
khỏi phần trình bày của nội dung của nó.
Đến năm 2008 là sự xuất hiện của HTML5, HTML5 đã đem đến cái nhìn khác cho
việc phát triển Web, với việc đưa ra các công nghệ mới, cung cấp cho người phát
triển web những khả năng tạo ra những ứng dụng mới, và đem lại nhiều lợi ích cho
người dùng cũng như người phát triển. HTML5 còn đang được kì vọng là sẽ có thể
thay thế được Flash trong tương lai.
1.1.2. XHTML
XHTML (viết tắt của Extensible HyperText Markup Language) , là sự kết hợp giữa

HTML và XML được xem như là hệ thống căn bản của trang web ngày nay.
XHTML được hỗ trợ bởi hầu hết tất cả các trình duyệt. XHTML đã thay thế HTML
chính bởi sự chặt chẽ trong cấu trúc của nó. XHTML thừa kế và mở rộng của
HTML và tuân theo các chuẩn của XML. Sự phát triển của XML là cho XHTML
cũng phát triển mạnh mẽ. Họ các kiểu tài liệu của XHTML đề dựa trên XML, và
được thiết kế để có thể làm việc được các phần mềm dựa trên XML. Khi các phần
mềm dựa trên sự phát triển của XML phát triển mạnh mẽ, thì XHTML cũng đã phát
triển lớn mạnh, nó đã trở thành chuẩn thiết kế web mới. Chính sự chặt chẽ, khắc
phục các nhược điểm của HTML đã làm cho XHTML được thành công.
1.1.3. Sự ra đời của HTML5
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ế đó, rõ ràng HTML cũng cần phải thay đổi, và sự thay đổi đó là cả một
quá 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
SVTH: Nguyễn Hữu Luật 8 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
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ũ, quá í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) . HTML5 được xây dựng và mang trong đó những ưu điểm:
• Khả năng tương thích: HTML5 vẫn giữ lại các cú pháp truyền thống trước
đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt
hỗ trợ thì nó phải có một cơ chế fall back để render trong các trình duyệt

cũ. Đương nhiên là, HTML5 không thể xóa bỏ tất cả những gì đã có suốt hơn
20 năm chỉ trong một ngày. Mặc dù điều này cũng không đồng nghĩa với
việc HTML5 hỗ trợ tất cả các trình duyệt, nhưng nếu có một trình duyệt đủ
cũ để không tương thích với HTML5, thì có lẽ đã đến lúc để nâng cấp trình
duyệt mới.
• Tính tiện dụng: đặt người dùng lên hàng đầu nên cú pháp của HTML5 khá
thoải mái (chưa được chặt chẽ như XHTML) , thiết kế hỗ trợ sẵn bảo mật, và
sự tách biệt giữa phần nội dung và trình bày ngày càng thể hiện rõ: công việc
định dạng hầu hết do CSS đảm nhiệm, HTML5 không còn hỗ trợ phần lớn
các chức năng định dạng trong các phiên bản HTML trước đây.
• Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp
các khai báo đơn giản hơn và một API mạnh mẽ. Một ví dụ dễ thấy là khai
báo DOCTYPE:
HTML4: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN”
/>HTML5: <!DOCTYPE html>
SVTH: Nguyễn Hữu Luật 9 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
• Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho các
ngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các
thiết bị và nền tảng khác nhau.
• HTML5 được cung cấp hoàn toàn miễn phí cho cả developer và người
dùng, không giống như Flash, Flash Player thì miễn phí, nhưng bộ công cụ
để phát triển nó thì có giá rất cao.
• HTML5 sẽ có lợi thế hơn về tính phổ biến khi bước vào môi trường di
động. Ví dụ: Flash là plug-in còn HTML5 thì được trực tiếp render từ trình
duyệt nên chắc chắn tính phổ biến sẽ cao hơn rất nhiều.
• HTML 5 đơn giản hơn. Ví dụ để chèn video vào web thì chỉ cần đến thẻ
<video src=”clip.ogg” widh=”200” height=”150” />.
Ngoài những ưu điểm đã nêu trên thì HTML5 còn mang theo nó các tính năng nổi

bật, và sẽ đem lại các cải tiến mới, hữu ích cho việc phát triển web:
• Offline Storage: Giống như Cookie nhưng có khả năng lưu trữ lớn hơn rất
nhiều. Với Offline Storage có thể lưu các dữ liệu như ngày tháng, database
của các ứng dụng, như email.
• Canvas drawing: Các trang web sử dụng HTML5 có thể sử dụng chức năng
này để sử dụng tác động lên hình ảnh, đồ thị và đồ họa, hay game
components mà ko cần phải cài thêm plugin gì cả.
• Native video and audio streaming support: Tuy vẫn còn mới nhưng nó sẽ
đem lại tiện ích rất lớn về việc trình chiếu video cũng như audio trên web mà
không cần sử dụng Flash. Hiện công nghệ đang đang được quan tâm rất
nhiều từ các nhà phát triển.
• Geolocation: Khả năng định vị mở ra hàng loạt các ứng dụng khác như lọc
kết quả tìm kiếm, tag ảnh tải lên theo vị trí. Đây là một tính năng được cho là
rất hữu ích và tiềm năng. Có thể thử chức năng định vị qua HTML5 tại trang
/>SVTH: Nguyễn Hữu Luật 10 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
• Smarter forms: các form bây giờ được kiểm soát tốt hơn về tính tập trung,
xác nhận dữ liệu, tương tác với các yếu tố khác cũng như gửi email, và nhiều
hơn nữa.
• Web Application focus: HTML5 cũng tạo ra các ứng dụng web độc đáo,
như công cụ kéo thả, các bản thảo luận, ứng dụng chat thời gian thực, các
yếu tố web hiện đại trên bất kì site nào và bất kì trình duyệt nào.
HTML5 đem lại cho các nhà thiết kế web một giao diện cho website hoàn chỉnh
hơn, với một số thẻ mới phục vụ cho việc phân cách nội dung cho trang web như:
<section>, <sidebar>, <header>, <footer>, <navigation> …
JavaScript được sử dụng khá nhiều trong quá trình phát triển của HTML5. Đối với
Flash và Silverlight, nó đều là những Plugin cực tốt và được sử dụng rộng rãi từ
trước tới nay, nhưng nó được tạo ra để giải quyết một vấn đề tự nhiên, và HTML5
đang khắc phục lại nó: đặt và quản lý các yếu tố tương tác trên một trang web. Bằng
chứng là việc Hiện nay có thể xem video, audio mà không cần sử dụng bất cứ một

plugin nào khác như trước đây vẫn phải sử dụng.
HTML5 mới được xuất hiện nên việc các trình duyệt cũ sẽ không hỗ trợ được. Các
trình duyệt mới hiện nay là Firefox 4, chrome 10 … đã bắt đầu hỗ trợ HTML5, và
dưới đây là hình ảnh các trình duyệt hỗ trợ code cho HTML5.
SVTH: Nguyễn Hữu Luật 11 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Hình 1: Các trình duyệt hỗ trợ HTML5và CSS3
Qua hình ảnh về sự hỗ trợ của các trình duyệt đối với HTML5 có thể thấy với trình
duyệt Chrome 9, 10 thì hầu như hỗ trợ đầy đủ cho HMTL5 ngoại trừ CSS
Transforms 3D. Còn với trình duyệt luôn đi đầu trong việc hỗ trợ HTML5 là Safari
thì đã hỗ trợ đầy đủ các công nghệ cho HTML5. Bảng trên cũng cho thấy trình
duyệt IE 6, 7, 8 hầu như đã không hỗ trợ gì cho HTML5 ngoại trừ chỉ hỗ trợ CSS
FontFace, do Microsoft là nhà tạo ra SiverLight, một công nghệ cạnh tranh trực
tiếp với HTML5. Nhưng đến phiên bản mới đây nhất là IE 9 thì Microsoft đã hỗ trợ
thêm một số các công nghệ cho HTML5, bời vì HMTL5 là công nghệ rất tốt cho
công nghệ điện toán đám mây mà Microsoft đang theo đuổi. Những yếu tố đó đã
cho thấy sự tiện ích và sức mạnh của HMTL5 cùng với sự phát triển về công nghệ
mà nó sẽ đem lại cho tương lai của web.
SVTH: Nguyễn Hữu Luật 12 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
1.2. Đồ họa trên Web và sự ra đời của Canvas.
Từ trước tới giờ đồ họa vẫn đóng vai trò quan trọng bậc nhất trong sự phát
triển của thế giới công nghệ. Đồ họa mang lại cái nhìn trực quan hơn và rõ hơn về
những gì muốn thể hiện. Để có được hình ảnh cần phải thực hiện các câu lệnh để vẽ
nó, tạo ra hình ảnh bằng các công cụ tạo ảnh.
Đồ họa trên web cũng vậy, Từ trước tới giờ để có được hình ảnh trên web thì
thường phải làm file ảnh sau đó đưa lên website, hoặc sử dụng các ngôn ngữ lập
trình trên server, vẽ hình ảnh trên đó rồi tải về máy khác, để hiện thị cho người xem
trên browser. Cách tạo đồ họa này đã được sử dụng phổ biến trong suốt các quá
trình phát triển của web từ trước tới giờ. Và cách vẽ đồ họa trên web theo kiểu

truyền thống này mang trong nó những nhược điểm không thể tránh khỏi:
• Do sử dụng và chạy code vẽ đồ họa trên server nên sẽ làm tăng khối lượng
công việc phải xử lý trên server.
• Phải tải hình ảnh đã vẽ được trên server về máy khách, nên làm chậm quá
trình duyệt web
• Tải hình ảnh về sẽ làm tốn bằng thông cho website
• Tăng khả năng bị lỗi hay mất file khi tải về…
Để khắc phục các nhược điểm này thì cần có một công cụ hay một ngôn ngữ có thể
tạo được ra hình ảnh trên web ngay tại máy của người sử dụng, để tránh được các
chi phí về dung lượng, băng thông… Cũng từ đó, Canvas trong ngôn ngữ HTML5
ra đời mang lại sự mới vẻ cũng như mong đợi trong việc sử dụng nó để vẽ đồ họa,
thay thế cho các phương pháp cũ trước đây. Canvas trong HTML5 giúp các nhà
phát triển web có thể tạo đồ họa ngay bằng các câu lệnh script, khi được tải về từ
server các câu lệnh này sẽ được thi hành và tạo nên hình ảnh đồ họa ngay trên máy
khách, chứ không phải tải lại hình ảnh đồ họa đã được thực hiện trên server. Việc
tạo đồ họa ngay trên máy khách sẽ giúp tiết kiệm được các chi phí về băng thông,
dung lượng lưu trữ và hơn thế nữa nó đem lại tốc độ tải các trang web nhanh hơn
cho người sử dụng.
Sự ra đời của HTML5 cũng như thẻ <canvas> là sự hi vọng mang lại những bước
đột phá lớn cho công nghệ phát triển web của thế giới.
1.3. Giới thiệu về Canvas
SVTH: Nguyễn Hữu Luật 13 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Canvas là một thẻ trên HTML5, <canvas> tạo ra một vùng cho phép thực hiện việc
tạo ra đồ họa ngay trên nền web. Canvas có thể tạo ra một vùng làm việc vẽ đồ họa
2D hoặc 3D tùy vào sự lựa chọn của người sử dụng. Với Canvas sẽ được tùy chỉnh
độ rộng, kích thước của vùng làm việc qua hai thuộc tính là width và height.
Ví dụ: <canvas id=”canvasID” width=”300” height=”300” ></canvas>
Nhưng nếu hai thuộc tính width và height không được tạo ra thì mặc định giá trị
cho width và height sẽ là 300px và 150px.

Tìm hiểu một số các khác niệm cũng như kiến thức cơ bản đề bắt đầu sử dụng
canvas vào công việc vẽ đồ họa.
1.3.1. Thuộc tính:
String, Width, Height: Là các thuộc tính căn bản của thẻ canvas cho biết được số
chiều của không gian làm việc (2D hoặc 3D) , cho biết chiều cao chiều rộng của thẻ
Canvas, mặc định là rộng 300px và cao là 150px.
1.3.2. Phương thức:
• getContext()
Trả về đối tượng mà có thể vẽ trên Canvas, dùng chuỗi “2D” để có được một
CanvasRenderingContext2D có thể vẽ đồ họa 2 chiều. Chuỗi “webgl” có phương
thức WebGLRenderingContext dùng cho đồ họa 3D được hỗ trợ trên các trình
duyệt, nhưng WebGL chưa được chuẩn hóa.
• toDataUrl()
Trả về một dữ liệu: URL đại diện cho hình ảnh ở trên Canvas. Canvas là một thẻ
trong HTML. Nó không có tính hoạt hoạt động riêng, nhưng nó định nghĩa một API
hỗ trợ các hoạt động vẽ kịch bản trên máy khách. Có thể đặt chiều cao cũng như
chiều rộng trên Canvas và có thể trích xuất hình ảnh từ Canvas với phương thức
toDataUrl() , nhưng các API vẽ thực tế được thực hiện bởi một đối tượng
“Context” và được trả lại bởi phương pháp getContext() .
SVTH: Nguyễn Hữu Luật 14 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Thẻ Canvas được giới thiệu trong Safari 1.3 và đang được chuẩn hóa. Nó được hỗ
trợ trong tất cả các phiên bản gần đây nhất của FireFox, Chrome, Opera. Canvas
cũng sẽ được hỗ trợ trong IE 9 và có thể được mô phỏng trong các phiên bản trước
nhờ sử dụng thư viện mã nguồn mở tại />1.3.3. Cấu Trúc
Object getContext(String contextID)
Trong đó: contextID: Tham số này đặc biệt để biết muốn vẽ với thể loại nào trong
Canvas. Nếu là “2d” thì nó sẽ gồm CanvasRenderingContext2D có thể sử dụng để
vẽ hai chiều. Chỉ có một đối tượng CanvasRenderingContext2D trên đối tượng
Canvas, các lệnh gọi sẽ lặp đi lặp lại thông qua getContext(“2d”) để quay trở lại đối

tượng cũ.
HTML5 chuẩn hóa tham số 2d này và không xác định với các tham số khác. Trong
trình duyệt có hỗ trợ nó có thể được hỗ trợ để vẽ đồ họa 3 chiều, dùng tham số 3d.
Canvas có thể tạo được nhiều hình dạng đặc trưng khác nhau từ đơn giản tới những
đồ họa phức tạp nhiều chi tiết. Việc phát triển vẽ đồ họa ngay trên máy khách bằng
cách sử dụng canvas bây giờ đang nhận được rất nhiều sự quan tâm chú ý.
1.4. Định hướng phát triển canvas
Với những lợi ích mang lại của Canvas cũng như là HTML5, thì hiện nay công
nghệ này đang được chú ý tới rất nhiều, và đang được nhiều đơn vị tổ chức hỗ trợ
để phát triển. HTML5 đang hướng tới là một chuẩn mới trong việc thiết kế web. Có
thể thấy sự quan tâm đặc biệt tới công nghệ tạo đồ họa trên nền web của canvas
cũng như là HTML5, được thể hiện qua nhưng thống kê về lượng người search trên
google từ khóa HTML5 và canvas, lượng tài liệu về lớn về canvas, cùng sự hỗ trợ
của các trình duyệt hiện nay cho công nghệ mới này.
Chương 2. Nghiên Cứu Về Canvas
2.1. Sơ Lược về vẽ đồ họa của Canvas
SVTH: Nguyễn Hữu Luật 15 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Việc vẽ đồ họa trên nền website hiện nay đang ngày càng được ưa chuộng và
áp dụng nhiều, bởi nó đem lại sự tiện lợi và các ưu điểm khác nữa khi sử dụng hình
thức này để vẽ đồ họa. Ngày nay với sự phát triển của công nghệ HTML cùng sự
phát triển của thẻ Canvas thì việc ứng dụng để vẽ đồ họa ngay trên máy khách lại
càng được chú ý đến, cũng như đem lại sự hi vọng và tin tưởng cho một sự phát
triển mới của công nghệ Web.
Dưới đây là một số các lý do cho việc phát triển đồ họa trên máy khách:
1. Các đoạn mã được sử dụng để tạo đồ họa trên máy khách, thường nhỏ
hơn bản thân các hình ảnh, nó tiết kiệm được khoản băng thông khá
lớn.
2. Việc vẽ đồ họa trên máy khách sẽ giảm tải trên máy chủ và tiết kiệm
được chi phí phần cứng.

3. Tạo đồ họa trên máy khách phù hợp với các kiến trúc ứng dụng ajax
mà máy chủ cung cấp, khách hàng quản lý dữ liệu.
4. Khách hàng có thể nhanh chóng, chủ động vẽ lại đồ họa (có thể là một
ứng dụng hay trò chơi) và sẽ là không khả thi nếu từng khung hình
được tải về từ máy chủ.
5. Thẻ Canvas mang đến cho các nhà phát triển web những sự cứu trợ cho
những khó khăn từ DOM.
6. Thẻ Canvas không xuất hiện riêng biệt, nhưng nó tạo ra một bề mặt vẽ
dùng API thật sự mạnh mẽ cho Javascript bên máy khách.
2.2. Giới thiệu về vẽ đồ họa 2D bằng canvas.
Canvas hỗ trợ việc vẽ đồ họa 2D khá tốt. Tuy Canvas là một thẻ nằm trong
HTML5 nhưng thực chất thì canvas đã xuất hiện khá lâu trước đó. Nó được trình
duyệt Safari của Apple hỗ trợ từ trước, từ phiên bản Safari 1.3 và sau đó được
FireFox hỗ trợ từ phiên bản 1.5 và Opera phiên bản 9. Canvas được hỗ trợ trong tất
cả các phiên bản của Google Chrome. Nhưng thẻ <canvas> lại không được hỗ trợ
bởi trình duyệt IE, từ IE 9 trở về sau không hỗ trợ sử dụng canvas. Nhưng vẫn có
thể khắc phục được lỗi này để sử dụng canvas trong các phiên bản IE 6,7 và 8. Bằng
cách sử dụng mã nguồn mở ExplorerCanvas tại địa chỉ:
SVTH: Nguyễn Hữu Luật 16 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Sau mở gói nguồn để ý có file script
“excanvas.js”, thực hiện thêm đoạn code sau vào trong thẻ <head> để có thể sử
dụng canvas trong IE 6, 7, 8:
<! [if lte IE 8 ]>
<script src=”excanvas.compiled.js”></script>
<![endif] >
Hình 2 : Hình ảnh IE8 khi sử dụng excanvas.compiled.js
Các lệnh cơ bản sẽ được hỗ trợ ở trong IE. Ngoài ra có một số các câu lệnh không
được hỗ trợ như Radial gradient và clipping sẽ không được hỗ trợ trong IE. Ngoài
ra câu lệnh scale cũng sẽ không được đúng trong IE. Hệ tọa độ được sử dụng trong

Canvas là hệ thống tọa độ điểm giống hệ tọa độ pixel trong CSS.
Hầu hết các API của canvas thì không được định nghĩa ngay trong <canvas>,
Canvas xác định vùng làm việc thông qua phương thức getContext với tham số là
2D hay 3D để xác định vùng làm việc của nó là 2 chiều hay 3 chiều. Canvas sẽ gọi
hàm getContext() theo cấu trúc sau:
Var ctx = canvas.getContext(“2D”) ;
Nhưng trước khi gọi hàm getContext dùng để vẽ đồ họa hai chiều thì cần xác định
rõ đối tượng <canvas> sẽ sử dụng để làm việc, đối tượng đó có thế xác định thông
qua ID của nó. Thường thì sẽ sử dụng câu lệnh:
document.getElementById(‘canvasID’). Vậy để bắt đầu cho việc sử dụng thẻ
<canvas> để vẽ đồ họa thì sẽ cần thực hiện hai câu lệnh xác định đối tượng làm
việc và phương thức làm việc như sau:
Var canvas = document.getElementById(‘canvasID’) ;
SVTH: Nguyễn Hữu Luật 17 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Var ctx = canvas.getContext(‘2D’) ;
2.3. Các Kĩ thuật vẽ 2D trên Canvas
2.3.1. Đường thẳng và đa giác
• Đường thẳng:
Để vẽ một đường, trước hết sẽ phải định nghĩa đường đó, một đường Path có thể là
một đường, hoặc cũng có thể là nhiều đường ghép lại. Để bắt đầu vẽ một đường thì
việc đầu tiên là phải định nghĩa một đường path mới bằng cách gọi beginPath(),
bắt đầu đường path sử dụng phương thức moveTo() . Phương thức moveTo() sẽ
đưa tới điểm muốn bắt đầu “đặt bút vẽ” tại điểm đầu tiên. Để vẽ một đường thẳng
cần sử dụng lineTo() , nó sẽ kéo một đường thẳng từ vị trí đặt bút ban đầu tới một
điểm định sẵn trong tham số của lineTo() .
Ví dụ: context.beginPath() ; // bắt đầu vẽ Path mới
// bắt đầu đặt bút vẽ tại điểm có tọa độ (0,0)
context.moveTo(0,0) ;
context.lineTo(100,120) ;

context.lineTo(10,120) ;
// vẽ một đường thẳng từ điểm (0,0) tới điểm
(100,120) , và từ (100,120) tới (10,120)
Ở trên chỉ là định nghĩa đường Path mà muốn vẽ, để có đường path thật sự được
hiển thị thì sẽ sử dụng hai phương thức là fill() và stroke() để điền màu vào vùng
mà đường path bao trọn, và điền vào viền cho đường path. Hai phương thức này sẽ
không có thông số bên trong.
Context.fill() ; // điền vùng path bao trọn
Context.stroke() ; // điền viền cho path
Khi thực hiện các dòng lệnh trên thì có thể thu được kết quả như hình dưới đây:
SVTH: Nguyễn Hữu Luật 18 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Hình 3: Minh họa vẽ đường Path.
Hình trên cho thấy đường có hai đường path và không có đườn Path quay về điểm
ban đầu. Để có đường path quay về điểm ban đầu, có thể dùng lineTo() hoặc dùng
hàm closePath() , thì tự động sẽ tạo nên một Path quay trở lại điểm khởi đầu.
• Đa giác
Sẽ cần sử dụng các phương thức ở trên để vẽ và phủ màu cho một hình vuông. 4
đỉnh của hình vuông sẽ nằm trên một đường tròn. Tâm hình vuông cũng là tâm của
đường tròn đơn vị này, xác định bán kính của đường trong là 30px. Ví dụ về đoạn
code vẽ hình vuông:
function draw() {
var canvas=document.getElementById('chart') ;
var c=canvas.getContext('2d') ;
c.beginPath() ; // Bắt đầu vẽ đường mới
var angle = Math.PI/4;
c.moveTo(50 + 50*Math.sin(angle) ,60 -
50*Math.cos(angle) ) ;
for (var i = 1 ; i < 4 ; i++) {
angle += -Math.PI/2;

SVTH: Nguyễn Hữu Luật 19 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
c.lineTo(50 + 50*Math.sin(angle) ,60 -
50*Math.cos(angle) ) ;
}
c.closePath() ;
c.fill() ;
c.stroke() ; }
Đoạn code trên cho thấy vẽ được một hình vuông màu đen. Muốn sử dụng màu
khác cần có hai phương thức đặt màu cho fill() và đặt màu cho stroke() là fillStyle
và strokeStyle với cấu trúc context.fillStyle = “mã màu”
Ví dụ: context.fillStyle = ‘#abc’;
context.strokeStyle = ‘red’;
2.3.2. Thuộc tính đồ họa
Canvas cung cấp cho người sử dụng những thuộc tính đồ họa độc đáo như
màu để tô cho hình fillStyle, màu cho đường viền strokeStyle, độ rộng của đường
kẻ lineWidth, độ trong suốt của hình ảnh globalAlpha, Để vẽ các hình ảnh thì các
thuộc tính như fillStyle hay strokeStyle sẽ được sử dụng nhiều hơn, Canvas cũng có
các thuộc tính đồ họa cho văn bản như chỉnh vị trí cho văn bản với textAlign, đổ
bóng mờ với shadowBlur, màu của bóng đổ với shadowColor, đổ bóng đứng với
shadowOffsetY, đổ bóng nằm với shadowOffsetX…
Canvas API định nghĩa các thuộc tính đồ họa, có thể gọi nhiều các thuộc tính đồ
họa đó vào nhiều các ngữ cảnh khác nhau. Những thuộc tính đồ họa này phải được
đặt trước các câu lệnh về chủ đề khác để cài đặt các thuộc tính cho các chủ đề này
trước. Có thể tạo ra nhiều các chủ đề khác nhau với nhiều các thuộc tính khác nhau,
như mỗi chủ đề là một màu, độ rộng cũng như độ rõ nét của các hình ảnh khác
nhau, điều đó tạo nên sự phong phú cho các tác phẩm đồ họa được tạo nên từ
canvas. Bảng thuộc tính đồ họa trong canvas:
Thuộc tính Ý nghĩa
SVTH: Nguyễn Hữu Luật 20 MSV: CQ491688

Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
fillStyle màu, gradient, mẫu cho fill
font font CSS cho text
globalAlpha độ mờ cho các pixel
globalCompopsiteOperation vị trí cho các đối tượng
lineCap cách vẽ điểm cuối của path
lineWidth độ rộng của đường path
textAlign Vị trí của text left, right, center
textBaseline Dóng chiều thẳng đứng cho text
shadowBlur độ mờ của đổ bóng
shadowColor màu sắc của bóng đổ
shadowOffsetX độ dài khi đổ bóng ngang
shadowOffsetY độ dài đổ bóng thẳng đứng
strokeStyle màu sắc, gradient, mẫu đường cho viền.
Canvas còn cho phép lưu tình trạng, trạng thái của các thuộc tính đồ họa này vào
trong một stack. Thường thì những hình đồ họa phức tạp hay sử dụng cách này hơn
cả, nó rút gọn được các câu lệnh cũng như phương thức cần gọi đến, nếu biết cách
sử dụng tốt thì đây là phương thức thật sự hiệu quả và vô cùng hữu ích cho các nhà
phát triển. Phương thức save() và restore() , hai phương thức này không có tham
số. save() sẽ lưu lại được trạng thái của các thuộc tính đồ họa, nó lưu vào một stack
và theo nguyên lý của stack restore() sẽ lấy lại trạng thái đó nếu có lệnh gọi đến nó.
2.3.3. Hệ tọa độ
Như ở trên đã nói thì hệ tọa độ mặc định ban đầu của Canvas là điểm phía
trên bên trái và có trục X kéo dài từ trái qua phải, và trục Y kéo dài từ trên xuống
dưới. Đấy là tọa độ mặc định khi tạo ra một môi trường cho việc vẽ đồ họa bằng
canvas, trong khi thực hiện có thể phải dùng đến các đồ thị chuyển đổi để đặt lại các
tọa độ cho phù hợp. Hệ thống ma trận tọa độ ban đầu của các điểm sẽ bị xê dịch về
hệ tọa độ khác bằng các biến đổi ma trận.
SVTH: Nguyễn Hữu Luật 21 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas

Phương thức setTransform() chấp nhận cho chuyển đổi hệ tọa độ bằng cách thay
đổi các ma trận điểm. Hệ thống thường được sử dụng là biến đối phóng to hay thu
nhỏ lại (scale) , chuyển dịch hệ tọa độ tới vị trí khác (Translate) , quay ma trận tọa
độ (rotate) .
Các cách thức biến đổi đó được miêu tả lại trong các tính toán như sau:
- Phương thức gọi context.translate(dx,dy) :
x’ = x + dx ;
y’ = y + dy ;
// (x’,y’) là tọa độ mới, (x,y) là tọa độ cũ.
- Phương thức context.scale(sx,sy) :
x’ = sx * x ;
y’ = sy * y ;
// (x’,y’) là tọa độ mới, (x,y) là tọa độ cũ.
- Phương thức context.rotate(angle) :
x’ = x * cos(angle) – y * sin(angle) ;
y’ = y * sin(angle) + x * cos(angle) ;
Phải cần chú ý đến các thứ tự biến đổi trong hệ tọa độ. Các thứ tự biến đổi khác
nhau sẽ đưa tới những kết quả khác nhau.Ngoài ra để biến đổi tọa độ từ điểm (x,y)
ban đầu sang điểm (x’’,y’’) trong hệ trục tọa độ ban đầu, ta cần phải biến đổi qua
một gian đoạn trung gian chẳng hạn như biến đổi qua điểm (x’,y’) chẳng hạn:
Ví dụ: x’’ = sx * x + dx ;
y’’ = sy * y + dy ;
nhưng khi gọi tới translate trước scale thì kết quả sẽ lại khác đi:
x’’ = sx * (x + dx) ;
SVTH: Nguyễn Hữu Luật 22 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
y’’ = sy * (y + dy) ;
Ta sẽ thực hiện tạo một hàm biến đổi transform Shear() :
// Shear transform:
// x' = x + kx*y;

// y' = y + ky*x;
function shear(c, kx, ky) {
c.transform(1, ky, kx, 1, 0, 0) ;
};
function rotateAbout(c, theta, x, y) {
var ct = Math.cos(theta) , st = Math.sin(theta) ;
c.transform(ct, -st, st, ct,
-x*ct-y*st+x, x*st-y*ct+y) ;
}

SVTH: Nguyễn Hữu Luật 23 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Hình 4: Hệ tọa độ
2.3.4. Đường cong
Không phải lúc nào cũng chỉ cần vẽ đường thằng, vì vậy canvas cũng hỗ trợ
cho để vẽ các đường cong trong các hình họa. Canvas hỗ trợ các phương thức vẽ
đường cong khá hữu hiệu:
• arc() : Phương thức dùng để vẽ đường tròn trên canvas.
Cấu trúc: arc(x,y,R,Startangle,Angle,Alockwise) ;
Trong đó:
o x,y là tọa độ tâm đường tròn
o R là bán kính đường tròn
o Startangle là góc bắt đầu để vẽ
o Angle là góc sẽ được vẽ
o Clockwise là xoay theo chiều kim đồng hồ hay không, có hai giá trị là
true và false.
Ví dụ: vẽ đường tròn tâm O (40,50) bán kính 40px.
Context.arc(40, 50, 40, 0, Math.PI*2, true) ;
• bezierCurveTo() : Phương thức dùng để vẽ đường cong với một điểm
chốt.

Cấu trúc: bezierCurveTo(x, y, x1, y1) ;
Trong đó:
o x,y là tọa độ của điểm chốt
o x1,y1 là tọa độ của điểm cuối đường cong cần vẽ tới.
SVTH: Nguyễn Hữu Luật 24 MSV: CQ491688
Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas
Hình 5: Hình minh họa cho phương thức bezierCurveTo()
• quadraticCurveTo() : phương thức dùng để vẽ đường cong với 2 điểm
chốt
Cấu trúc: quadraticCurveTo(x, y, x1, y1, x2, y2) ;
Trong đó:
o x, y là tọa độ điểm chốt thứ nhất
o x1, y1 là tọa độ điểm chốt thứ hai
o x2, y2 là tọa độ điểm cuối đường cong cần vẽ tới
Hình 6: Hình minh họa cho phương thức quadraticCurveTo()
Một ví dụ nhỏ về vẽ đường cong:
SVTH: Nguyễn Hữu Luật 25 MSV: CQ491688