UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN ----- ----- NGUYỄN VĂN THÂN TÌM HIỂU ĐỒ HỌA TRÊN HTML5 VÀ CSS3 KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC Qu ả ng Nam, tháng 05 n ă m 2016 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN ----- ----- NGUYỄN VĂN THÂN TÌM HIỂU ĐỒ HỌA TRÊN HTML5 VÀ CSS3 Sinh viên thực hiện: NGUYỄN VĂN THÂN MSSV: 2112011030 CHUYÊN NGÀNH : CÔNG NGHỆ THÔNG TIN KHÓA : 2012 – 2016 Cán bộ hướng dẫn: ThS HỒ TUẤN ANH Qu ả ng Nam, tháng 05 n ă m 2016 LỜI CẢM ƠN Em xin chân thành cảm ơn các thầy cô trường Đại Học Quảng Nam, thầy cô khoa Công Nghệ Thông Tin đã tận tình giảng dạy, trang bị cho chúng em những kiến thức quý báu trong quá trình học tập tại trường Đặc biệt em xin chân thành cảm ơn thầy Hồ Tuấn Anh đã hướng dẫn em tận tình trong suốt thời gian làm đề tài khóa luận để em hoàn thành tốt khóa luận Với sự hiểu biết có hạn, khóa luận không thể tránh khỏi thiếu sót, em rất mong được sự giúp đỡ của các thầy cô để khóa luận được hoàn thiện hơn Em xin chân thành cảm ơn Quảng Nam tháng 05 năm 2016 Sinh viên thực hiện Nguyễn Văn Thân DANH MỤC TỪ VIẾT TẮC STT Từ viết tắc Diễn giải 1 HTML HyperText Markup Language 2 SGML standard Generalized Markup Language 3 CSS Cascading Style sheet 4 DOM Document Object Model 5 RIA Rich Internet Application 6 API Application Programming Interfaces DANH MỤC CÁC BẢNG Tên bảng Trang Bảng các thuộc tính trong thẻ 6 Bảng các thuộc tính thẻ 7 Bảng thuộc tính đồ họa trong canvas: 22 Bảng các thuộc tính đổ bóng: 31 DANH MỤC HÌNH ẢNH STT Hình ảnh Số trang 1 Hình 1: hình xác định vị trí 10 2 Hình 2: ảnh IE8 khi sử dụng excanvas compiled js 20 3 Hình 3: hình minh họa cho đường thẳng 26 4 Hình 4 : hình minh họa cho hình tròn 27 5 Hình ảnh 5 : hình minh họa cho hình chữ nhật 28 6 Hình 6: hình chữ được tô màu 29 7 Hình 7: hình chữ không được tô màu 29 8 Hình 8: hình gradient xuyên tâm 31 9 Hình 9: hình minh họa cho đổ bóng 32 10 Hình 10: hình minh họa cho vẽ ảnh trên canvas 34 11 Hình11: hình minh họa cho vẽ độ họa 36 12 hình 12: hình quả bóng tỉnh 37 13 Hình 13: hình quả bóng di chuyển 38 14 Hình 14: hình quả bóng được thêm dấu hiệu lực 39 15 Hình 15: hình quả bóng được di chuyển bằng chuột 40 M Ụ C L Ụ C Phần 1 MỞ ĐẦU 1 1 1 Lý do chọn đề tài 1 1 2 Mục tiêu của đề tài 1 1 3 Đối tượng và phạm vi nghiên cứu 2 1 4 Phương pháp nghiên cứu 2 1 5 Lịch sử nghiên cứu 2 1 6 Đóng góp của đề tài 2 1 7 Cấu trúc đề tài 2 Phần 2 NỘI DUNG NGHIÊN CỨU 3 Chương 1: CƠ SỞ LÝ THUYẾT 3 1 1 Tổng quan về HTML 3 1 1 1 Lịch sử của HTML 3 1 1 2 Sự ra đời của HTLM5 4 1 1 3 Cú pháp của HTML5 5 1 1 4 Thành phần mới trong HTML5 6 1 1 4 1 Thẻ 6 1 1 4 2 Thẻ 7 1 1 4 3 Thẻ 8 1 1 4 4 Web Form 8 1 1 4 5 Một số thành phần mới khác 9 1 1 5 Khả năng tương thích HTML5 9 1 2 Tổng quan về API và công cụ hổ trợ 9 1 3 Tổng quan về CSS3 11 1 3 1 Tổng quan về CSS3 11 1 3 2 Một số thành phần CSS3 mới 11 1 3 3 Thuộc tính mới trong CSS3 11 1 4 Giới thiệu về Javascrip 12 1 5 Thư viện Jquery 14 1 6 Đồ họa trên web và sự ra đời của canvas trên HTML5 16 1 7 Canvas là gì? 17 1 7 1 Thuộc tính 17 1 7 2 Phương thức 18 1 7 3 Cấu trúc 18 1 8 Sơ Lược về vẽ đồ họa của Canvas 19 1 9 Giới thiệu vẽ đồ họa 2D bằng canvas 19 1 9 1 Thuộc tính đồ họa 21 1 10 Thành phần canvas 2D API 22 1 11 Ưu điểm của thành phần canvas 24 Chương 2: ỨNG DỤNG ĐỒ HỌA 25 2 1 Ứng dụng vẽ đường trong canvas 25 2 1 1 Vẽ đường thẳng 25 2 1 3 Vẽ hình chữ nhật 27 2 1 4 Vẽ tiêu đề 28 2 1 5 Gradients 30 2 1 6 Đổ bóng 31 2 1 7 Hình ảnh 32 2 2 Vẽ đồ họa trên canvas 35 2 3 Thêm hiệu ứng di chuyển 36 2 3 1 Thêm hiêu ứng di chuyển 38 2 3 2 Thêm dấu hiệu lực 39 2 3 3 Thêm điều khiển chuột 40 KẾT LUẬN VÀ KIẾN NGHỊ 41 1 Kết luận 41 2 Kiến nghị 41 Tài Liệu Tham Khảo 42 S VTH: Nguyễn Văn Thân Trang 1 Phần 1 MỞ ĐẦU 1 1 Lý do chọn đề tài Hiện nay với sự phát triển của nền công nghệ, đặt biệt sự phát triển của ngành công nghệ thông tin vào trong các lĩnh vực cũng như các hoạt động vui chơi giải trí Các trình duyệt web có thể chạy trên máy tính bàn, laptop, và trên cả điện thoại Các ứng dụng với đầy đủ các hiệu ứng hình ảnh, âm thanh hầu hết được tạo ra bởi Flash, khả năng tương tác của các công nghệ với các thành phần xung quanh(các thẻ HTML) không được thuận lợi Các ứng dụng cũng bị hạn chế trên nhiều trình duyệt Với sự ra đời của HTML5 cùng với các thành phần API mới , những giới hạn trên đã được xóa bỏ và đang dần thay thế được công nghệ Flash, với các ứng dụng cần những hiệu ứng đồ họa và chuyển động đặc biệt, lập trình viên có thể sử dụng Canvas với kiểu bitmap Không chỉ áp dụng 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 thư viện đồ họa giúp tạo ra các ứng dụng đồ thị, game trong cả môi trường 2D, 3D như những ứng dụng trên desktop HTML5 và CSS3 không còn bị giới hạn trên các trình duyệt mà còn có thể được triển khai trên desktop dưới dạng các widget, trên các thiết bị di động và có thể bất kỳ thiết bị nào Với HTML5 và CSS3 lập trình viên không cần sử dụng hay yêu cầu người dùng cài dặt bất kì thư viện nào để có thể chạy được các ứng dụng của họ 1 2 Mục tiêu của đề tài Tìm hiểu HTML5 và CSS3, các tính năng hổ trợ cho việc đồ họa tạo hiệu ứng động trên web Biết được cách tạo ra các hình ảnh chuyển động trên web mà không cần sự hổ trợ của các công cụ flash, photoshop… S VTH: Nguyễn Văn Thân Trang 2 1 3 Đối tượng và phạm vi nghiên cứu Tìm hiểu HTML5 Tìm hiểu CSS3 Javascrip Canvas 2D API 1 4 Phương pháp nghiên cứu Tự nghiên cứu: có thể tìm hiểu qua mạng internet Nghiên cứu tài liệu trên thư viện, và nhiều tài liệu liên quan Trao đổi với giảng viên hướng dẫn 1 5 Lịch sử nghiên cứu Đề tài tìm hiểu về HTML5 và CSS3 đã được tìm hiểu nhiều, và được phát triển rộng rãi, tuy nhiên vấn đề tìm hiểu chức năng đồ họa trên HTML5 thì ít thấy người tìm hiểu nên tôi quyết định chọn đề tài này để làm đề tài khóa luận 1 6 Đóng góp của đề tài hiểu được sự phát triển của ngôn ngữ lập trình web, và sự phát triển của HTML5 và CSS3 trong việc hổ trợ làm web giúp quản bá rộng rãi đồ họa trên web để nhiều người biết đến và tìm hiểu ngôn ngữ này 1 7 Cấu trúc đề tài Bao gồm 2 chương với nội dung sau: Chương 1: Cơ sở lý thuyết : Giới thiệu tổng quan về HTML, HTML5, CSS3, Javascrip, làm quen các thành phần mới trong HTML5 và CSS3, khả năng tương thích của HTML5, tìm hiểu về các tính năng của thành phần canvas trên HTML5 Chương 2: Ứng dụng đồ họa trên web: ứng dụng được áp dụng vào thực tế để tạo ra các hình ảnh, hiệu ứng động hay làm web game S VTH: Nguyễn Văn Thân Trang 3 Phần 2 NỘI DUNG NGHIÊN CỨU Chương 1: CƠ SỞ LÝ THUYẾT 1 1 Tổng quan về HTML 1 1 1 Lịch sử của HTML HTML (viết tắc 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 , các mẫu thông tin được trình bày trên world wide web Được định nghĩa như một ứng dụng đơn giản của SGML (standard Generalized Markup Language), đượ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 đã trở thành một chuẩn internet do tổ chức world wide web consortium (W3C) HTML ra đời năm 1989, do Tim Berners-Lee phát triển, nhờ tính dễ học và dễ sử dụng nên HTML nhanh chóng được phổ biến Từ năm 1989-1997, HTML đã phát triển qua bốn cột mốc, phiên bản gần 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 Tuy nhiên, HTML hiện không còn được phát triển tiếp và được thay thế bằng XHTML Các giai đoạn phát triển của HTML: 1990 – 1991: HTML xuất hiện với tên HTML Tags 1994: HTML2 ra đời 1996: Sự ra đời của HTML3, CSS và JavaScript 1998: HTML4, CSS2 ra đời 2000: chuẩn XHTML ra đời thay thế cho HTML4 2002: XHTML2 được phát triển 2005: XHTML2 vẫn được sử dụng, sự ra đời của Ajax 2008: HTML5 ra đời S VTH: Nguyễn Văn Thân Trang 4 1 1 2 Sự ra đời của HTLM5 HTLM5 là ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của internet trong tương lai Đây là phiên bản thứ 5 của ngôn ngữ HTML, được giới thiệu bởi world wide web consortium(w3c) HTML5 giữ lại những đặc điểm cơ bản của html4 và bổ sung thêm các đặc tả nổi trội của XHTML, DOM cấp 2, và Javascript 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ế đó, 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 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) S VTH: Nguyễn Văn Thân Trang 5 1 1 3 Cú pháp của HTML5 Không phân biệt chữ hoa chữ thường Các thành phần không bắt buộc phải có thẻ đóng Không bắt buộc phải có nháy kép cho thuộc tính S VTH: Nguyễn Văn Thân Trang 6 1 1 4 Thành phần mới trong HTML5 1 1 4 1 Thẻ Thẻ cho phép nhúng video vào trang web mà không cần dùng plugin của trình duyệt Bảng các thuộc tính trong thẻ Thuộc tính Giá trị Ví dụ Mô tả Audio muted Audio=”muted” Xác định trạng thái mặc định của âm thanh Autoplay autoplay Autoplay=”autoplay” Xác định trạng thái tự động chạy của video controls controls controls =”controls” Hiển thị bộ điều khiển của video Height Pixel Height=”100px” Xác định chiều cao của video Loop loop Loop=”loop” Xác định video có được lặp lại hay không Poster url Poster =”image/img_video gif” Xác định hình đại diện cho video preload preload preload =“preload” Xác định việc tải video khi tải trang Src url Src=”video/video mpeg” Xác định việc tải video khi tải trang Width Pixel Width=”100px” Xác định chiều rộng của video Ví dụ: S VTH: Nguyễn Văn Thân Trang 7 1 1 4 2 Thẻ Thẻ cho phép nhúng file âm thanh vào trang web mà không cần dùng plugin của trình duyệt Bảng các thuộc tính thẻ Thuộc tính Giá trị Ví dụ Mô tả autoplay autoplay Autoplay= “autoplay” Âm thanh tự động chạy controls controls Controls = “controls” Hiển thị tính năng điều khiển Loop loop Loop = ”loop” Hiển thị tính năng lặp lại khi chạy xong đoạn âm thanh Preload Auto Metadata none Preload = “auto” Xác định âm thanh có chạy không khi tải trang Src url Src = “media/audio mp3” Xác định đường dẫn tới file âm thanh Ví dụ: S VTH: Nguyễn Văn Thân Trang 8 1 1 4 3 Thẻ Thẻ cung cấp tính năng vẽ và hoạt hình Làm việc giống như một bảng vẽ trên trang web Có thể thêm các mã javascript hoặc các tính năng hoạt hình mới của CSS3 để làm cho đối tượng được tạo ra trên bảng vẽ di chuyển , biến mất, thay đổi tỷ lệ … Lưu hình ảnh vừa vẽ dưới dạng png Canvas có thể vẽ một khối màu đỏ, khối màu gradient hay tập hợp nhiều màu trên một khối, tạo chư nhiều màu, đổ bóng… Ví dụ: Your browser does not support the canvas element var canvas = document getElementById("myCanvas"); var ctx = canvas getContext("2d"); ctx fillStyle = "#FF0000"; ctx fillRect(10,10,150,75); 1 1 4 4 Web Form Các thành phần mới của form HTML5 bổ sung thêm chức năng mà các nhà thiết kế cũng như các nhà phát triển web thường phải kết hợp thông qua các phương tiện khác như javascript và flash HTML5 cung cấp nhiều điều khiển trong form hơn, dễ dàng hơn cho nhà thiết kế và phát triển HTML5 hỗ trợ validation form thông qua các thuộc tính mới Thuộc tính required: bắt buộc phải nhập input Giới hạn chuỗi sử dụng 2 thuộc tính minleght và maxleght Thuộc tính autofocus: tự động di chuyển con trỏ về thẻ input S VTH: Nguyễn Văn Thân Trang 9 1 1 4 5 Một số thành phần mới khác , : gán nhãn (hoặc chú thích ảnh ) cho các hình ảnh trên trang web : nhóm một tập các thành phần vào một thành phần hợp lý 1 1 5 Khả năng tương thích HTML5 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 1 2 Tổng quan về API và công cụ hổ trợ API (Application Programming Interfaces- giao diện lập trình ứng dụng): Là cách tạo ra các ứng dụng sử dụng các thành phần được dựng sẵn Không chỉ được áp dụng trong phát triển web mà còn cả với các ngôn ngữ kịch bản Mục đích chính: chuẩn hóa cơ chế làm việc và đơn giản hóa các nhiệm vụ lập trình phức tạp Một số HTML5 API: Drag and Drop, Web storage, Microdata, Geolocation API Geolocation: Giúp xác định vị trí địa lý của trình duyệt web Thông tin này được gửi dưới dạng dữ liệu liên quan dựa trên vị trí Geolocation hiện tại đang được kích hoạt trong một số trình duyệt hiện đại S VTH: Nguyễn Văn Thân Trang 10 Ví dụ: fflickr com/map Hình 1: hình xác định vị trí Web workers: Web workers là một framework giải quyết vấn đề hiệu suất của trình duyệt Là mã kịch bản chạy trên một luồng riêng biệt Web storage: Cải thiện cookie của trình duyệt Cookie là một công nghệ bị giới hạn và gây khó khăn cho người thiết kế khi sử dụng Web storage nâng cấp mô hình này để cung cấp không gian lưu trữ lớn cho các ứng dụng web hiện đại Web storage có 2 loại dữ liệu: - localStorage: Dữ liệu có thể truy cập tại bất kỳ thồi điểm nào, ngay cả khi đóng trình duyệt hoặc khi hệ thống khởi động lại - sessionStorage: Dữ liệu bị mất đi khi đóng trình duyệt S VTH: Nguyễn Văn Thân Trang 11 1 3 Tổng quan về CSS3 1 3 1 Tổng quan về CSS3 CSS3 không phải là một thành phần của HTML5, nhưng lại có mối liên quan mật thiết với HTML5 CSS3 được phát triển song song với HTML5 CSS3 là tiêu chuẩn mới nhất của CSS Nó có tính kế thừa và hoàn toàn tương thích với các phiên bản trước CSS3 được chia thành các module, các thành phần cũ được chia nhỏ và bổ sung các thành phần mới Một số module quan trọng trong CSS3: Selectors, Box model, Backgrounds and Border, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout, User Interface 1 3 2 Một số thành phần CSS3 mới CSS animation (CSS hoạt hình) CSS transition (CSS chuyển đổi) CSS 2D/3D transformation: transform CSS3 background, border, RGAa color, gradient, drop shadows, góc bo tròn, …, border-radius, background-image, border-image Web font: @font-face 1 3 3 Thuộc tính mới trong CSS3 Border-radius: specialsale { width: 400px; background-color:#D67E5C; border: 2px #773636 solid; -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; } Border-radius: tạo ra bốn góc bo tròn cho đường viền -webkit-border-radius: giúp IE9+ hỗ trợ -moz-border-radius: giúp Firefox hỗ trợ S VTH: Nguyễn Văn Thân Trang 12 Border-image: border: 20px #773636 solid; -webkit-border-image: url("images/border-bg png") 33% repeat; -moz-border-image: url("images/border-bg png") 33% repeat; border-image: url("images/border-bg png") 33% repeat; Cú pháp: border-image: source slice width outset repeat; Slice: phần bù bên trong của hình border Outset: số lượng diện tích mà hình nền border mở rộng CSS3 Gradient: Gradient là thành phần phổ biến trên trang web Gradient thường bao gồm: 2 điểm dừng màu (color stop) 1 điểm chuyển màu 1 4 Giới thiệu về Javascrip Javascript là một ngôn ngữ kịch bản có cấu trúc và cú pháp riêng Được sử dụng để thiết kế thêm tương tác trên trang web Thường được nhúng trực tiếp vào trang HTML Sử dụng rộng rãi, không cần bản quyền Javascript cũng có thể: + Cung cấp cho nhà thiết kế HTML công cụ lập trình + Phản ứng được với các sự kiện + Có thể đọc,thay đổi nội dung của phần tử HTML + Xác nhận dữ liệu + Phát hiện trình duyệt của người dùng + Được sử dụng để tạo ra các cookie Đặc tính của Javascript: Đơn giản, động(Dynamic), Hướng đối tượng(object oriented) S VTH: Nguyễn Văn Thân Trang 13 Đặc tính của ngôn ngữ java script: javascript là một ngôn ngữ có đặc tính: Đơn giản Động (Dynamic) Hướng đối tượng (Object Oriented ) Khai báo javascript: Khai báo javascript trực tiếp vào trong html: // câu lệnh javascript Sử dụng tập tin javascript bên ngoài: - Ví dụ: Dùng để bắt sự kiện người dùng: My First JavaScript
JavaScript can react to events Like the click of a button:
Click Me! Thay đổi nội dung HTML: My First JavaScriptJavaScript can change the content of an HTML element
S VTH: Nguyễn Văn Thân Trang 14 function myFunction() { x=document getElementById("demo"); // Tìm phần tử x innerHTML="Hello JavaScript!"; // Thay đổi nội dung } Click Me! 1 5 Thư viện Jquery Jquery là một thư viện kiểu mới của javascript giúp đơn giản hóa cách viết javascript và tăng tốc độ xử lý các sự kiện trên trang web Jquery thêm tương tác Ajax vào trong trang web Jquery là một thư viện hổ trợ cho mọi ngôn ngữ lập trình Net, PHP Jquery đơn giản hóa cách viết javascript và tăng tốc độ xử lý các sự kiện trên trang web, tiếc kiệm thời gian hơn so với việc viết javascript theo cách thông thường Jquery có thể : + Truy cập các phần tử trong nội dung trang web: jQuery cho phép bạn chọn bất cứ thành phần nào của tài liệu để “vọc” một cách dễ dàng như sử dụng CSS + Thay đổi hình thức giao diện của trang web: jQuery ra đời để lấp chỗ trống này, vì vậy bạn có thể sử dụng nó để giúp trang web có thể hiển thị tốt trên hầu hết các trình duyệt Hơn nữa jQuery cũng có thể thay đổi class hoặc những định dạng CSS đã được áp dụng lên bất cứ thành phần nào của HTML ngay cả khi trang web đó đã được trình duyệt load thành công + Thay đổi nội dung trang web: jQuery không chỉ có thể thay đổi bề ngoài của trang web, nó cũng có thể thay đổi nội dung của chính tài liệu đó chỉ với vài dòng code Nó có thể thêm S VTH: Nguyễn Văn Thân Trang 15 hoặc bớt nội dung trên trang, hình ảnh có thể được thêm vào hoặc đổi sang hình khác, danh sách có thể được sắp xếp lại hoặc thậm chí cả cấu trúc HTML của một trang web cũng có thể được viết lại và mở rộng + Tương tác với người dùng: Với thư viện javascript như jQuery, nó cho bạn nhiều cách để tương tác với người dùng ví dụ như khi người dùng nhấp chuột vào đường link thì sẽ có gì xảy ra Nhưng cái hay của nó là không làm cho code HTML của bạn rối tung lên chính là nhờ các Event Handler + Hiệu ứng động jQuery: fades, wipes, … jQuery cho phép bạn sử dụng rất nhiều hiệu ứng động như mờ dần, chạy dọc chạy ngang v v và nếu vẫn chưa đủ, nó còn cho phép bạn tự tạo ra các hiệu ứng của riêng mình + Lấy thông tin từ Server mà không cần load lại trang web (Ajax): Thư viện jQuery loại bỏ sự phức tạp của trình duyệt trong quá trình này và cho phép người phát triển web có thể tập trung vào các tính năng đầu cuối, đơn giản hoá các tác vụ javascript + Đơn giản hoá tác vụ của JavaScript jQuery cho phép các nhà phát triển web viết code javascript đơn giản hơn nhiều so với cách truyền thống như là các vòng lặp và điều khiển mảng S VTH: Nguyễn Văn Thân Trang 16 1 6 Đồ họa trên web và sự ra đời của canvas trên HTML5 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ẻ 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 S VTH: Nguyễn Văn Thân Trang 17 1 7 Canvas là gì? 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 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 Canvas HTML5 là một phần tử vẽ và tạo hình ảnh động vô cùng có ích 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 là lý tưởng để sản xuất tài liệu hình ảnh thú vị nhằm nâng cao các UI, 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 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 Ví dụ: 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 7 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 S VTH: Nguyễn Văn Thân Trang 18 1 7 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 t oDataUrl() , 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 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 http://code google com/p/explorercanvas/ 1 7 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 S VTH: Nguyễn Văn Thân Trang 19 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 8 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ì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 1 9 Giới thiệu 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ỗ S VTH: Nguyễn Văn Thân Trang 20 trợ trong tất cả các phiên bản của Google Chrome Nhưng thẻ 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ỉ: 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ẻ để có thể sử dụng canvas trong IE 6, 7, 8: Hình 2: ả 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 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 S VTH: Nguyễn Văn Thân Trang 21 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 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ẻ để 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’) ; 1 9 1 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 S VTH: Nguyễn Văn Thân Trang 22 Bảng thuộc tính đồ họa trong canvas: Thuộc tính Ý nghĩa 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ó 1 10 Thành phần canvas 2D API HTML5 xác định như một bitmap phụ thuộc vào độ phân giải, được sử dụng để vẽ đồ thị, đồ họa game hoặc hình ảnh trực quan khác Canvas S VTH: Nguyễn Văn Thân Trang 23 là hình chữ nhật trên trang và có thể sử dụng JavaScript để vẽ bất cứ điều gì bạn 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, tạo gradient HTML5 Canvas là một JavaScript API để mã hóa các bản vẽ Canvas API cho phép định nghĩa một đối tượng canvas như là thử trê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, IE9, và thông qua thư viện excanvas js trong các phiên bản IE hiện tại 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à bạn chỉ có thể vẽ bằng cách sử dụng script Bạn không có bất kỳ các nút DOM cho các hình khối bạn vẽ - bạn đang vẽ pixels, không phải vectơ và chỉ là các điểm ảnh được ghi nhớ Một số tính năng cả Canvas: Vẽ hình ảnh Tô màu Tạo hình học và các kiểu mẫu Văn bản Sao chép hình ảnh, video, những canvas khác Thao tác điểm ảnh Xuất nội dung của một thẻ sang tập tin ảnh tĩnh S VTH: Nguyễn Văn Thân Trang 24 1 11 Ưu điểm của thành phần canvas Ưu điểm của thành phần Canvas: Cho phép tạo graphic, hình động (animation), gradient, các đối tượng đồ họa khác bằng mã Đã được các trình duyệt phổ biến hỗ trợ Khả năng mạnh mẽ: làm game, animation, chart, graph, vector, Không phải sử dụng thêm plugin S VTH: Nguyễn Văn Thân Trang 25 Chương 2: ỨNG DỤNG ĐỒ HỌA 2 1 Ứng dụng vẽ đường trong canvas 2 1 1 Vẽ đườ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() moveTo(x,y): Xác định vị trí điểm đầu của đường thẳng sẽ vẽ lineTo(x,y): Xác định điểm cuối của đường thẳng sẽ vẽ var canvas = document getElementById("myCanvas"); var ctx = canvas getContext("2d"); // bắt đầu vẽ path mới // bắt đầu đặt bút vẽ tại điểm có tọa độ (10,10) ctx moveTo(10,10) ; ctx lineTo(120,10) ; ctx lineTo(10,120) ; // vẽ một đường thẳng từ điểm (10,10) tới điểm (120,10) , và từ (120,10) tới (10,120 ) ctx fillStyle = "#FF0000"; ctx fill(); ctx stroke(); Trong đó: Context fill() ; // điền vùng path bao trọn Context stroke() ; // bắt đầu vẽ S VTH: Nguyễn Văn Thân Trang 26 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: hình minh họa cho đường thẳng 2 1 2 Đường tròn - 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 đó: x,y là tọa độ tâm đường tròn R là bán kính đường tròn Startangle là góc bắt đầu để vẽ Angle là góc sẽ được vẽ Clockwise là xoay theo chiều kim đồng hồ hay không, có hai giá trị là true và false S VTH: Nguyễn Văn Thân Trang 27 Vẽ đường tròn tâm(90,90), bán kính 60px var canvas = document getElementById("myCanvas"); var ctx = canvas getContext("2d"); ctx beginPath(); ctx arc(90,90,60,0,2*Math PI, True); ctx stroke(); Hình 4 : hình minh họa cho hình tròn 2 1 3 Vẽ 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ểm bắ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 S VTH: Nguyễn Văn Thân Trang 28 Cấu trúc: fillrect(x, y, w, h) Trong đó: x, y: là tọa độ của đỉnh hình chữ nhật w, h: là chiều rộng và chiều dài của hình chữ nhật muốn vẽ var c = document getElementById("myCanvas"); var ctx = c getContext("2d"); ctx fillStyle = "#FF0000"; ctx fillRect(10,10,150,75); Hình ảnh 5 : hình minh họa cho hình chữ nhật 2 1 4 Vẽ tiêu đề Để vẽ văn bản trên khung hình chúng ta cần các thuộc tính và phương pháp sau: font - Xác định font chữ cho văn bản sẽ vẽ fillText( text,x,y ) - Viết chữ lên khung hình từ vị trí x và y strokeText( text,x,y ) -Tương tự như fillText nhưng không tô màu văn bản S VTH: Nguyễn Văn Thân Trang 29 Ví dụ: - Sử dụng fillText nội dung chữ sẽ được tô màu Hình 6: hình chữ được tô màu var c = document getElementById("myCanvas"); var ctx = c getContext("2d"); ctx font = "30px Arial"; ctx fillText("Hello World",10,50); - Sử dụng strokeText() nội dung chữ sẽ không được tô màu như fillText(); Hình 7: hình chữ không được tô màu var c = document getElementById("myCanvas"); var ctx = c getContext("2d"); ctx font = "30px Arial"; ctx strokeText("Hello World",10,50); S VTH: Nguyễn Văn Thân Trang 30 2 1 5 Gradients Một gradien là một vùng tô đầy di chuyển từ một màu này sang màu khác, pha trộn các màu ở nơi chúng giao nhau Có hai kiểu gradien mà bạn có thể tạo trong Canvas là: tuyến tính và xuyên tâm Một gradien màu có thể có nhiều màu sắc Phương thức addcolorStop(offset, color) xác định rõ sự lưu lại màu với màu sắc được chỉ ra cho gradien ở giá trị bù cụ thể Phương thức addColorStop() cho phép bạn chỉ rõ một giá trị bù giữa 0 và 1, ở đây quá trình chuyển tiếp sang màu bên cạnh bắt đầu Giá trị 0 là giá trị bù ở một đầu của gradien; 1 là giá trị bù ở đầu kia Sau khi đã định nghĩa gradien màu, đối tượng gradien có thể được gán cho phương thức fillStyle() Bạn cũng có thể vẽ văn bản bằng một gradien bằng cách sử dụng phương thức fillText() Gradien xuyên tâm —createradialGradient(x0,y0,r0,x1,y1,r1)— kết hợp hai hoặc nhiều màu trong một mẫu hình tròn hoặc hình nón bằng cách sử dụng sáu đối số: o (x0,y0) Tâm của hình tròn đầu tiên của một hình nón o r0 Bán kính của hình tròn đầu tiên o (x1,y1) Tâm của hình tròn thứ hai của hình nón o r1 Bán kính của hình tròn thứ hai S VTH: Nguyễn Văn Thân Trang 31 // Vẽ gradient xuyên tâm var ve = cxt createRadialGradient(450,300,00, 450,300,200); ve addColorStop(0, "red"); ve addColorStop(0 2, "black"); ve addColorStop(0 4, "green"); ve addColorStop(0 7, "yellow"); cxt fillStyle = ve; cxt fillRect(300,200,500,400); cxt fill(); } Hình 8: hình gradient xuyên tâm 2 1 6 Đổ bóng Canvas hỗ trợ cho việc vẽ đồ họa 4 thuộc tính điều chỉnh vẽ đổ bóng đồ họa là: shadowBlur() , shadowColor() , shadowOffsetX() , shadowOffsetY() Bảng các thuộc tính đổ bóng: 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 S VTH: Nguyễn Văn Thân Trang 32 xem ví dụ dưới để biết rõ hơn về các thuộc tính trong shadow c shadowColor = "rgba(100,100,100, 4) "; // màu xám mờ c shadowOffsetX = c shadowOffsetY = 3; // độ dài đổ bóng là 3 c shadowBlur = 5; c lineWidth = 10; c strokeStyle = "blue"; c strokeRect(100, 100, 300, 200) ; // vẽ một khung chữ nhật c font = "Bold 36pt Helvetica"; c fillText("Hello World", 115, 225) ; // vẽ Text c shadowOffsetX = c shadowOffsetY = 20; c shadowBlur = 10; c fillStyle = "red"; // phủ màu hình chữ nhật là màu đỏ c fillRect(50,25,200,65) ; // vẽ hình chữ nhật với màu đã chọn Hình 9: hình minh họa cho đổ bóng 2 1 7 Hình ảnh Sử dụng vector để cắt và chỉnh ảnh trong canvas Các hàm API trong Canvas cũng hỗ trợ các ảnh bitmap Phương thức drawImage() sẽ sao lưu các pixel ảnh từ ảnh gốc (hoặc từ một vùng lựa chọn của ảnh) rồi đưa vào trong Canvas, quay, phóng to thu nhỏ các pixel ảnh này nếu cần thiết Phương thức drawImage() có thể đưa ra ba, năm hay chín tham số Trong tất cả các trường hợp thì tham số thứ nhất là nguồn của ảnh, là các pixel đã sao lưu Tham số ảnh này thường là một thẻ hoặc một mặt ảnh được dựng bởi hàm Image() , nhưng cũng có thể là một thẻ hoặc thẻ khác Nếu thẻ S VTH: Nguyễn Văn Thân Trang 33 hoặc vẫn còn đang được tải xuống trình duyệt thì phương thức drawImage() sẽ không gọi được chúng, tức là các file phải được tải xuống hết thì phương thức drawImage() mới bắt đầu làm việc được Trong ba tham số của phương thức drawImage() thì tham số thứ hai và thứ ba là giá trị của tọa độ X và Y của điểm phía trên bên trái của vùng chọn ảnh sẽ được chọn để sử dụng Hệ tọa độ X, Y ở đây là hệ tọa độ của hình ảnh, được tính với gốc tọa độ là điểm phía trên bên trái của hình ảnh Tham số thứ bốn và thứ năm của drawImage() cho biết thông số về chiều rộng và chiều dài của khung hình chữ nhật đích mà đã khoanh vùng chọn để sử dụng Góc của khung hình ảnh được chọn là phía trên bên trái có tọa độ (X, Y) cho nên góc đối diện nó là góc phía dưới bên phải sẽ có tọa độ (X + width, Y + height) Tham số thứ sáu và bảy chính là tọa độ của hình chữ nhật đích mà ta muốn đặt hình ảnh đã khoang vùng ở trên vào ở trong canvas Với hệ tọa độ chính là hệ tọa độ ban đầu của canvas Tham số thứ tám và chín là chiều rộng và chiều cao của hình ảnh, hai tham số này cho phép phóng to cũng như thu nhỏ hình ảnh được đặt vào trong canvas Xem cấu trúc của drawImage() với chín tham số: drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)Image to use:
Canvas:
Your browser does not support the HTML5 canvas tag S VTH: Nguyễn Văn Thân Trang 34 window onload = function() { var canvas = document getElementById("myCanvas"); var ctx = canvas getContext("2d"); var img = document getElementById("scream"); ctx drawImage(img, 10, 10); }; Hình 10: hình minh họa cho vẽ ảnh trên canvas S VTH: Nguyễn Văn Thân Trang 35 2 2 Vẽ đồ họa trên canvas Với việc sử dụng 2 phương thức moveTo(x,y) và lineTo(x,y) chúng ta có thể vẽ được những hình ảnh đồ họa cơ bản đơn giản moveTo(x,y): Xác định vị trí điểm đầu của đường thẳng sẽ vẽ lineTo(x,y): Xác định điểm cuối của đường thẳng sẽ vẽ ctx moveTo(10,40); ctx lineTo(10,100); ctx moveTo(10,40); ctx lineTo(20,20); ctx moveTo(20,20); ctx lineTo(140,20); ctx moveTo(140,20); ctx lineTo(150,40); ctx moveTo(150,40); ctx lineTo(150,100); ctx moveTo(10,100); ctx lineTo(150,100); ctx moveTo(10,40); ctx lineTo(150,40); ctx moveTo(30,60); ctx lineTo(30,100); ctx moveTo(30,60); ctx lineTo(110,60); ctx moveTo(110,60); ctx lineTo(110,100); ctx moveTo(70,60); ctx lineTo(70,100); ctx moveTo(40,20); ctx lineTo(30,40); ctx moveTo(60,20); ctx lineTo(50,40); ctx moveTo(80,20); ctx lineTo(70,40); S VTH: Nguyễn Văn Thân Trang 36 ctx moveTo(100,20); ctx lineTo(90,40); ctx moveTo(120,20); ctx lineTo(110,40); ctx moveTo(140,20); ctx lineTo(130,40); ctx moveTo(130,40); ctx lineTo(130,100); ctx stroke(); Hình11: hình minh họa cho vẽ độ họa 2 3 Thêm hiệu ứng di chuyển Để tạo một hiệu ứng cần phải nhờ tới sự hổ trợ của javascript và css Bắt đầu tạo một bóng với trạng thái tỉnh: var canvas = document getElementById(''''canvas''''); var ctx = canvas getContext(''''2d''''); var ball = { x: 100, y: 100, radius: 25, //đo lon cua qua bong color: ''''blue'''', draw: function() { S VTH: Nguyễn Văn Thân Trang 37 ctx beginPath(); ctx arc(this x, this y, this radius, 0, Math PI*2, true); ctx closePath(); ctx fillStyle = this color; ctx fill(); } }; ball draw(); hình 12: hình quả bóng tỉnh S VTH: Nguyễn Văn Thân Trang 38 2 3 1 Thêm hiêu ứng di chuyển ctx clearRect(0,0, canvas width, canvas height); ball draw(); ball x += ball vx; ball y += ball vy; Từ vị trí ban đầu ta vẽ bóng chuyển động tới vị trí khác: Hình 13: hình quả bóng di chuyển S VTH: Nguyễn Văn Thân Trang 39 2 3 2 Thêm dấu hiệu lực function clear() { ctx fillStyle = ''''rgba(255,255,255,0 3)''''; ctx fillRect(0,0,canvas width,canvas height); } Hình 14: hình quả bóng được thêm dấu hiệu lực S VTH: Nguyễn Văn Thân Trang 40 2 3 3 Thêm điều khiển chuột canvas addEventListener(''''mousemove'''', function(e){ if (!running) { clear(); ball x = e clientX; ball y = e clientY; ball draw(); } }); Hình 15: hình quả bóng được di chuyển bằng chuột S VTH: Nguyễn Văn Thân Trang 41 KẾT LUẬN VÀ KIẾN NGHỊ 1 Kết luận Ngôn ngữ HTML5 và CSS3 giúp tạo ra các trang web động hay web game một cách nhanh chóng Đề tài đã tìm hiểu được một số ứng dụng đồ họa trong html5, tuy nhiên đề tài chỉ giới hạn ở các ứng dụng nhỏ và chỉ tìm hiểu trên lý thuyết Do thời gian thực hiện đề tài có giới hạn và kiến thức của em còn nhiều hạn chế nên không thể tránh khỏi những thiếu sót và chưa đưa ra được ưu và nhược điểm còn tòn tại trong đề tài, vì vậy em rất mong nhận được sự giúp đỡ của thầy cô, giáo viên hướng dẫn trực tiếp cũng như các thầy cô trong khoa để đề tài của em được hoàn thiện và phát triển hơn 2 Kiến nghị Đề tài chưa làm được các ứng dụng trên công nghệ 3D và các ứng dụng cao hơn, nếu có thời gian em sẽ tìm hiểu và phát triển thêm về các vấn đề này S VTH: Nguyễn Văn Thân Trang 42 Tài Liệu Tham Khảo [1] http://giaotrinhhay com/ebook-html5-canvas-lap-trinh-game-2d-free/ [2] http://www mediafire com/view/5ld7flgs4re7ljk/ebook_html5_canvas_l ap_trinh_game_2d_free pdf [3] http://forum vietdesigner net/threads/chia-se-5-bo-giao-trinh-ebook- lap-trinh-game-html5 71254/ [4] http://forum vietdesigner net/threads/chia-se-5-bo-giao-trinh-ebook- lap-trinh-game-html5 71254/ S VTH: Nguyễn Văn Thân Trang 43 XÁC NHẬN CỦA HỘI ĐỒNG BẢO VỆ KHÓA LUẬN TỐT NGHIỆP Bài khóa luận này đã được chỉnh sửa hoàn chỉnh theo ý kiến đóng góp của các thành viên trong hội đồng bảo vệ khóa luận Quảng nam, tháng 05 năm 2016 Xác nhận của giáo viên hướng dẫn Sinh viên thực hiện Phản biện 1 Phản biện 2 Chủ tịch hội đồng UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN - - NGUYỄN VĂN THÂN TÌM HIỂU ĐỒ HỌA TRÊN HTML5 VÀ CSS3 KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC Quảng Nam, tháng 05 năm 2016 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN - - NGUYỄN VĂN THÂN TÌM HIỂU ĐỒ HỌA TRÊN HTML5 VÀ CSS3 Sinh viên thực hiện: NGUYỄN VĂN THÂN MSSV: 2112011030 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA : 2012 – 2016 Cán hướng dẫn: ThS HỒ TUẤN ANH Quảng Nam, tháng 05 năm 2016 LỜI CẢM ƠN Em xin chân thành cảm ơn thầy cô trường Đại Học Quảng Nam, thầy cô khoa Cơng Nghệ Thơng Tin tận tình giảng dạy, trang bị cho chúng em kiến thức quý báu trình học tập trường Đặc biệt em xin chân thành cảm ơn thầy Hồ Tuấn Anh hướng dẫn em tận tình suốt thời gian làm đề tài khóa luận để em hồn thành tốt khóa luận Với hiểu biết có hạn, khóa luận khơng thể tránh khỏi thiếu sót, em mong giúp đỡ thầy để khóa luận hoàn thiện Em xin chân thành cảm ơn Quảng Nam tháng 05 năm 2016 Sinh viên thực Nguyễn Văn Thân DANH MỤC TỪ VIẾT TẮC STT Từ viết tắc Diễn giải HTML HyperText Markup Language SGML standard Generalized Markup Language CSS Cascading Style sheet DOM Document Object Model RIA Rich Internet Application API Application Programming Interfaces DANH MỤC CÁC BẢNG Trang Tên bảng Bảng thuộc tính thẻ Bảng thuộc tính thẻ 22 Bảng thuộc tính đồ họa canvas: 31 Bảng thuộc tính đổ bóng: DANH MỤC HÌNH ẢNH STT Hình ảnh Số trang 10 Hình 1: hình xác định vị trí 20 26 Hình 2: ảnh IE8 sử dụng excanvas.compiled.js 27 28 Hình 3: hình minh họa cho đường thẳng 29 29 Hình : hình minh họa cho hình trịn 31 32 Hình ảnh : hình minh họa cho hình chữ nhật 34 36 Hình 6: hình chữ tơ màu 37 38 Hình 7: hình chữ khơng tơ màu 39 40 Hình 8: hình gradient xuyên tâm Hình 9: hình minh họa cho đổ bóng 10 Hình 10: hình minh họa cho vẽ ảnh canvas 11 Hình11: hình minh họa cho vẽ độ họa 12 hình 12: hình bóng tỉnh 13 Hình 13: hình bóng di chuyển 14 Hình 14: hình bóng thêm dấu hiệu lực 15 Hình 15: hình bóng di chuyển chuột MỤC LỤC Phần MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục tiêu đề tài 1.3 Đối tượng phạm vi nghiên cứu 1.4 Phương pháp nghiên cứu 1.5 Lịch sử nghiên cứu 1.6 Đóng góp đề tài 1.7 Cấu trúc đề tài Phần NỘI DUNG NGHIÊN CỨU Chương 1: CƠ SỞ LÝ THUYẾT 1.1 Tổng quan HTML 1.1.1 Lịch sử HTML 1.1.2 Sự đời HTLM5 1.1.3 Cú pháp HTML5 1.1.4 Thành phần HTML5 1.1.4.1 Thẻ 1.1.4.2 Thẻ 1.1.4.3 Thẻ 1.1.4.4 Web Form 1.1.4.5 Một số thành phần khác 1.1.5 Khả tương thích HTML5 1.2 Tổng quan API công cụ hổ trợ 1.3 Tổng quan CSS3 11 1.3.1 Tổng quan CSS3 11 1.3.2 Một số thành phần CSS3 11 1.3.3 Thuộc tính CSS3 11 1.4 Giới thiệu Javascrip 12 1.5 Thư viện Jquery 14 1.6 Đồ họa web đời canvas HTML5 16 1.7 Canvas gì? 17 1.7.1 Thuộc tính 17 1.7.2 Phương thức 18 1.7.3 Cấu trúc 18 1.8 Sơ Lược vẽ đồ họa Canvas 19 1.9 Giới thiệu vẽ đồ họa 2D canvas 19 1.9.1 Thuộc tính đồ họa 21 1.10 Thành phần canvas 2D API 22 1.11 Ưu điểm thành phần canvas 24 Chương 2: ỨNG DỤNG ĐỒ HỌA 25 2.1 Ứng dụng vẽ đường canvas 25 2.1.1 Vẽ đường thẳng 25 2.1.3 Vẽ hình chữ nhật 27 2.1.4 Vẽ tiêu đề 28 2.1.5 Gradients 30 2.1.6 Đổ bóng 31 2.1.7 Hình ảnh 32 2.2 Vẽ đồ họa canvas 35 2.3 Thêm hiệu ứng di chuyển 36 2.3.1 Thêm hiêu ứng di chuyển 38 2.3.2 Thêm dấu hiệu lực 39 2.3.3 Thêm điều khiển chuột 40 KẾT LUẬN VÀ KIẾN NGHỊ 41 Kết luận 41 Kiến nghị 41 Tài Liệu Tham Khảo 42 Phần MỞ ĐẦU 1.1 Lý chọn đề tài Hiện với phát triển công nghệ, đặt biệt phát triển ngành công nghệ thông tin vào lĩnh vực hoạt động vui chơi giải trí Các trình duyệt web chạy máy tính bàn, laptop, điện thoại Các ứng dụng với đầy đủ hiệu ứng hình ảnh, âm hầu hết tạo Flash, khả tương tác công nghệ với thành phần xung quanh(các thẻ HTML) không thuận lợi Các ứng dụng bị hạn chế nhiều trình duyệt Với đời HTML5 với thành phần API , giới hạn xóa bỏ dần thay công nghệ Flash, với ứng dụng cần hiệu ứng đồ họa chuyển động đặc biệt, lập trình viên sử dụng Canvas với kiểu bitmap Không áp dụng cho việc thiết kế trang web trực quan, HTML5 áp dụng để tạo thư viện đồ họa giúp tạo ứng dụng đồ thị, game môi trường 2D, 3D ứng dụng desktop HTML5 CSS3 khơng cịn bị giới hạn trình duyệt mà cịn triển khai desktop dạng widget, thiết bị di động thiết bị Với HTML5 CSS3 lập trình viên không cần sử dụng hay yêu cầu người dùng cài dặt thư viện để chạy ứng dụng họ 1.2 Mục tiêu đề tài Tìm hiểu HTML5 CSS3, tính hổ trợ cho việc đồ họa tạo hiệu ứng động web Biết cách tạo hình ảnh chuyển động web mà khơng cần hổ trợ công cụ flash, photoshop… SVTH: Nguyễn Văn Thân Trang 1.3 Đối tượng phạm vi nghiên cứu Tìm hiểu HTML5 Tìm hiểu CSS3 Javascrip Canvas 2D API 1.4 Phương pháp nghiên cứu Tự nghiên cứu: tìm hiểu qua mạng internet Nghiên cứu tài liệu thư viện, nhiều tài liệu liên quan Trao đổi với giảng viên hướng dẫn 1.5 Lịch sử nghiên cứu Đề tài tìm hiểu HTML5 CSS3 tìm hiểu nhiều, phát triển rộng rãi, nhiên vấn đề tìm hiểu chức đồ họa HTML5 thấy người tìm hiểu nên tơi định chọn đề tài để làm đề tài khóa luận 1.6 Đóng góp đề tài hiểu phát triển ngôn ngữ lập trình web, phát triển HTML5 CSS3 việc hổ trợ làm web giúp quản bá rộng rãi đồ họa web để nhiều người biết đến tìm hiểu ngơn ngữ 1.7 Cấu trúc đề tài Bao gồm chương với nội dung sau: Chương 1: Cơ sở lý thuyết : Giới thiệu tổng quan HTML, HTML5, CSS3, Javascrip, làm quen thành phần HTML5 CSS3, khả tương thích HTML5, tìm hiểu tính thành phần canvas HTML5 Chương 2: Ứng dụng đồ họa web: ứng dụng áp dụng vào thực tế để tạo hình ảnh, hiệu ứng động hay làm web game SVTH: Nguyễn Văn Thân Trang