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” http://www.w3.org/TR/html4/loose.dtd“> 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 http://html5demos.com/geo. SVTH: Nguyễn Hữu Luật 10 MSV: CQ491688 [...]... đồ 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ẽ. .. 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ã SVTH: Nguyễn Hữu Luật nguồn mở 16 ExplorerCanvas tại địa chỉ: MSV: CQ491688 Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas 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. .. người sử dụng Sự ra đời của HTML5 cũng như thẻ 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, 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. .. 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 10: Hình ảnh minh họa cho lineCap và lineJoin Nhìn trên hình minh họa sẽ thấy được rõ hơn các tác dụng của thuộc tính lineJoin cũng như lineCap Tùy vào từng trường hợp mà sẽ sử dụng các thuộc tính cho phù hợp 2.3.8 Kí tự Để viết chữ trong canvas thì thông thư ng sẽ được sử dụng phương thức fillText() để điền chữ vào... 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. .. 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. .. 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... Luật 28 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 9: Pattern và gradients Ngoài ra còn có thể dùng thẻ canvas để làm mẫu nguồn cho các thẻ canvas khác // tạo một canvas với tên offscreen và đặt chiều rộng cho nó var offscreen = document.createElement( "canvas" ) ; offscreen.width = offscreen.height = 10; // getContext và thực hiện vẽ offscreen.getContext("2d")... 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à. .. Nghiên cứu về Canvas trong HTML5 và xây dựng thư viện vẽ đồ thị sử dụng Canvas Hình 11: Thuộc tính textAlign và textBaseLine Thư ng thì phải đo để xác định chiều dài của chữ trước khi điền nó vào Do đó phải cần đến phương thức gọi đến chiều dài thực của text measureText() Var width = context.measureText(text) width 2.3.9 Đổ bóng Canvas hỗ trợ cho việc vẽ đồ họa 4 thuộc tính điều chỉnh vẽ đổ bó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. đề 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. 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ư