Mộtcông nghệ trong HTML5, nhận được nhiều sự chú ý đến hiện nay là việc sử dụng thẻ để 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
Trang 1MỤC LỤC
MỤC LỤC 1
DANH MỤC HÌNH VẼ 3
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.1.2 XHTML 8
1.1.3. Sự ra đời của HTML5 8
1.2 Đồ họa trên Web và sự ra đời của Canvas 13
1.3 Giới thiệu về Canvas 14
1.3.1 Thuộc tính: 14
1.3.2 Phương thức: 14
1.3.3 Cấu Trúc 15
1.4 Định hướng phát triển canvas 15
Chương 2 Nghiên Cứu Về Canvas 16
2.1 Sơ Lược về vẽ đồ họa của Canvas 16
2.2 Giới thiệu về vẽ đồ họa 2D bằng canvas 17
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 độ 22
2.3.4 Đường cong 24
2.3.5 Hình chữ nhật 27
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
Trang 22.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
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
Trang 3DANH 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() 26
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
Trang 4Lờ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ệcquan 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ôngnghệ 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ínhnăng nổi trội và dễ sử dụng HTML5 hiện nay còn được kì vọng là sẽ thay thế Flashtrong tương lai, cũng như sẽ được công nhận là một chuẩn cho web mới Như vậyHTML5 hiện nay rất được chú ý bởi các tính năng sử dụng nổi bật, và đang đượcchờ đợ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ộtcô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ạinhiề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ớiweb 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ốtnghiệ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âydựng thư viện dùng để vẽ đồ thị trên nền web sử dụng thẻ Canvas trong HTML5 vàJavaScript
Trang 5Chuyê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ếusó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
Trang 6Chương 1 Tổng quan về HTML1.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 trangweb, 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ảnnhư:
<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ụngngà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ốncộ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 chophé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ữngdò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]:
Trang 7 1990 – 1991: HTML xuất hiện với cái tên HTML Tags.
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ểnWeb
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ộidung 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ủachuẩ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àoviệ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ựcquan, như <font>, <b> (in đậm) , và <i> (in nghiêng) Những mã mang tính chấttrình bày đó đã được loại bỏ khỏi HTML 4.01 Strict và các đặc tả XHTML nhằm
Trang 8tạ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 rakhỏ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 choviệ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áttriể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 chongườ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ế HTMLchính bởi sự chặt chẽ trong cấu trúc của nó XHTML thừa kế và mở rộng củaHTML và tuân theo các chuẩn của XML Sự phát triển của XML là cho XHTMLcũ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ầnmề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áttriển lớn mạnh, nó đã trở thành chuẩn thiết kế web mới Chính sự chặt chẽ, khắcphụ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ườngxuyê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ộtquá 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
Trang 91999 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ànhtiê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ấpdẫ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ớiviệ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ìnhduyệ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ớncá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à khaibáo DOCTYPE:
HTML4: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd“>
HTML5: <!DOCTYPE html>
Trang 10 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ácthiế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ìnhduyệ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ổibậ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, databasecủ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 gamecomponents 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ấtnhiề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
http://html5demos.com/geo
Trang 11 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ềuhơ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ỉnhhơ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ằngchứng là việc Hiện nay có thể xem video, audio mà không cần sử dụng bất cứ mộtplugin 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áctrì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
Trang 12Hì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ìnhduyệt Chrome 9, 10 thì hầu như hỗ trợ đầy đủ cho HMTL5 ngoại trừ CSSTransforms 3D Còn với trình duyệt luôn đi đầu trong việc hỗ trợ HTML5 là Safarithì đã hỗ trợ đầy đủ các công nghệ cho HTML5 Bảng trên cũng cho thấy trìnhduyệ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 chocô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
Trang 131.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áttriể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ậptrì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 xemtrê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ểutruyề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ượngcô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ácchi 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áykhách, chứ không phải tải lại hình ảnh đồ họa đã được thực hiện trên server Việctạ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ơncho người sử dụng
Trang 14Sự 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
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ọa2D 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ụngcanvas 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ư
Trang 15chiề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()
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 Canvascũng sẽ được hỗ trợ trong IE 9 và có thể được mô phỏng trong các phiên bản trướcnhờ sử dụng thư viện mã nguồn mở tại http://code.google.com/p/explorercanvas/
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ượngCanvas, các lệnh gọi sẽ lặp đi lặp lại thông qua getContext(“2d”) để quay trở lại đốitượ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ằngcá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ôngnghệ 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
Trang 16Chương 2 Nghiên Cứu Về Canvas2.1 Sơ Lược về vẽ đồ họa của 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ìnhthứ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ạicàng được chú ý đến, cũng như đem lại sự hi vọng và tin tưởng cho một sự pháttriể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ợ chonhữ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 trongHTML5 nhưng thực chất thì canvas đã xuất hiện khá lâu trước đó Nó được trìnhduyệt Safari của Apple hỗ trợ từ trước, từ phiên bản Safari 1.3 và sau đó được
Trang 17FireFox 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ằngcách sử dụng mã nguồn mở ExplorerCanvas tại địa chỉ:
http://code.google.com/p/explorercanvas/ 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ọihà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
Trang 18qua 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’) ;
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
Trang 19Context.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:
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ểmban đầu Để có đường path quay về điểm ban đầu, có thể dùng lineTo() hoặc dùnghà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ạncode 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) ) ;
Trang 20for (var i = 1 ; i < 4 ; i++) { angle += -Math.PI/2;
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àukhá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àytrướ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
Trang 21nhau, đ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:
globalCompopsiteOperation vị trí cho các đối tượng
textAlign Vị trí của text left, right, center
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àotrong 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íatrê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ốngdướ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
Trang 22canvas, trong khi thực hiện có thể phải dùng đến các đồ thị chuyển đổi để đặt lại cáctọ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
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 thunhỏ 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ácnhau 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 quamộ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 ;
Trang 23nhưng khi gọi tới translate trước scale thì kết quả sẽ lại khác đi:
x’’ = sx * (x + dx) ; y’’ = sy * (y + dy) ;
Ta sẽ thực hiện tạo một hàm biến đổi transform Shear() :
-x*ct-y*st+x, x*st-y*ct+y) ;
}
Trang 24Hì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.
Trang 25o 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
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
Trang 26Hình 6: Hình minh họa cho phương thức quadraticCurveTo()
Trang 272.3.5 Hình chữ nhật
Phương thức để vẽ một hình chữ nhật hay hình vuông, với cách sử dụng dễdàng và mức sử dụng phổ biến của phương thức này Phương thức này chỉ ra điểmbắt đầu vẽ hình chữ nhật Nó là điểm ở góc trên cùng bên trái của hình chữ nhậtđịnh vẽ, cùng với các thông số về chiều dài cũng như chiều rộng của hình chữ nhậtđịnh vẽ
fillRect() là cách thức vẽ một hình chữ nhật đặc biệt với màu của fillStyle hiện hành, tương tự thì strokeRect() cũng vẽ một hình chữ nhật với màu strokeStyle hiện hành clearRect() là phương thức xóa đi một hình chữ nhật với chiều dài và
chiều rộng theo cấu trúc
2.3.6 Màu sắc, độ mờ, Gradients và Patterns
Các thuộc tính fillStyle và strokeStyle thường sẽ được sử dụng để vẽ hìnhhọa, vì nó cho phép thay đổi màu sắc trên các yếu tố của một bản vẽ Màu sắc sẽ
được sử dụng rất nhiều trong việc vẽ đồ họa Dùng cho fillStyle, strokeStyle, dùng
cho việc định màu gradients, background image Hệ màu trong Canvas cũng được
sử dụng giống như hệ màu của CSS
