CHOOSING HTML 5 CANVAS
OR SVG TO DRAW IMAGES FOR WEBSITE
* HTML 5 canvas xuất hiện gần cuối năm 2010 theo
tiêu chuẫn quốc tế W3C, do nhóm chuyên viên của W3C nghiên cứu biên sọan
từ năm 2007.
* SVG xuất hiện năm 1999, sớm hơn HTML 5 canvas 10 năm.
Cả hai đều
dùng để vẽ hình trên trang Web theo phương pháp chọn điểm tọa độ (coordinate - points) và được hiển
thị thành hình bởi browser.
* Nếu dùng canvas thì hình sẽ hiện ra theo
dạng bitmap còn gọi là raster kết hợp bởi những pixels.(
Everything in canvas is pixel ). Mỗi pixel có 4 bytes.
* Nếu vẽ
bằng SVG , hình sẽ hiện ra theo
dạng vector graphics.
* Trên Image Editor hay notepad,chúng ta có
thẻ vẽ hình bằng HTML 5 Canvas hoặc
SVG rồi hiển thị bằng browser Google sẽ có kết quả như
người viết bài nầy.
Browsers hổ trợ : Chrome, Safari, firefox
Trước hết bắt
buộc phải có canvas id=” myCanvas ” và kích thước của canvas.
Canvas là hình
chữ nhật có kích thước chiều rộng và chiều cao tính theo pixel.Hình
vẽ sẽ xuất hiên trong canvas.
Khi viết giống
như trên thì khung hình canvas có 4 cạnh màu đỏ tự động xuất hiện
ngay khi mở browser Google
Vẽ hình theo canvas
phải dùng javaScript nên tất cả code dùng vẽ hình bắt buộc phải nằm
trong script tag.
Dùng getContext(
“2d” ) để áp dụng chung cho tất cả các loại hình. Context("2d") nghĩa là 2 dimentional context.Trong tương lai rất gần sẽ có Context(" 3d").
Nếu muốn vẽ
hình chữ nhật thì viết thí dụ rect(20,20,100,50) rồi nối với context theo DOM.Hai con số 20,20 là tọa độ x,y của đỉnh góc bên trái (upper-left corner) của hình chữ nhật
và hai con số 100,50 là chiều rộng và chiều cao của
hình chữ nhật.
Sau khi tô màu fillStyle và vẽ xong phải có đủ ctx.fill()
và ctx.stroke() thì
hình mới xuất hiện.
Trước khi vẽ
hình, chúng ta thường vẽ sơ khởi bằng bút chi.Khi nào thấy vừa ý
tất cả thì mới vẽ lại băǹg bút mực.
Ở đây nên hiểu contextStroke() có nghĩa là sau cùng phải vẽ bằng mực “ink” để hòan tất.
2 – Cách vẽ hình 2 bằng SVG.
Mở xem bài “ Drawing Vector Images With SVG ” posted August-6-2012
MM
NÊN CHỌN CÁCH VẼ NÀO ?
HTML 5 canvas là phương tiện dùng để vẽ hình
bitmap format trong browser.( The HTML 5 canvas element provides a means for
drawing bitmap images inside the browser.)
SVG ( Scalable Vector Graphics ) được xây dựng trong XML dùng
để vẽ hình vector format.
Hình SVG được
kết hợp bởi những dấu chấm,những đường thẳng,đường cong và hình đa
gíac do software dựa theo phương tr̀inh tóan học nên có tên là vector
graphic format không chứa pixels.
* Muốn vẽ hình
bitmap video game vì cần loaded nhanh do không bị ảnh hưởng của XML thì
nên chọn HTML 5 canvas nhưng an ninh (security) của HTML 5 bị hạn chế.
* Muốn hình giãn
rộng hay thu nhỏ tuỳ theo màng hình mà không bị xơ, nhòa ( fuzzy) thì
chọn SVG.
* Về loading,SVG
chậm hơn canvas vì SVG là XML nhưng nếu cần thực hiện những vẽ di
động phức tạp thì SVG rất tốt.( good at complex animations )
* Nếu không có
kiến thức về javaScript để thực hiện những hình di động thì nên chọn
SVG.
Vậy tuỳ thuộc
vào loại công việc và kiến thức chúng ta chọn một trong hai cái hoặc
xử dụng cả hai.
Bài kế tiếp : " Vẽ hình bitmap với HTML 5 Canvas "
