Trước khi HTML5 được giới thiệu tới với thế giới của các developer web, nhiều thứ đã từng vô hồn, không thỏa mãn, và thật phức tạp để đạt được. Một ví dụ là, bất kì developer nào muốn tạo ra graphic và animation, đều buộc phải dựa vào những công cụ như Flash plugin hay Java plugin – một thứ gì đó nặng nề và nhức đầu.
Nikita, người đã có hơn 7 năm kinh nghiệm phát triển web và hiện đang dạy lại các kĩ năng của mình cho mọi người, nói rằng “sự ra đời của Canvas – một element đầy sức mạnh của HTML5, đã thay đổi mọi thứ và trao quyền lực cho các developer để hoàn thành các công việc mà trước đó từng rất khó khăn”.
HTML5 Canvas là gì?
Canvas là một element của HTML5, nó cho phép mọi người dễ dàng tạo graphic một cách mạnh mẽ, trong khi chạy chương trình mà không làm gián đoạn quá trình, bằng việc sử dụng ngôn ngữ lập trình JavaScript sẵn có.
Canvas element chỉ làm việc như một môi trường bao chứa graphic; vì thế, chúng ta cần sử dụng JavaScript để render graphic.
Chúng ta có thể sử dụng Canvas element để đạt được nhiều mục đích khác nhau trên web app, như vẽ đồ thị, tạo ra các animation, phát triển game, hay tạo ảnh - tất cả mọi thứ đó, mà không phải phụ thuộc vào công cụ từ bên ngoài.
Bất ngờ hơn, Canvas sẵn có dưới dạng API, và nó được hỗ trợ bởi những nền tảng và trình duyệt hiện đại nhất. Hơn nữa, nó tương thích đa nền tảng. Nhờ đó, chúng ta có thể tạo ra ứng dụng một lần, và deploy lên nhiều nền tảng khác nhau – PC hay các thiết bị di động.
Cùng xem một Canvas markup code
Đây là một ví dụ markup code đơn giản cho Canvas element:
<canvas width="320" height="160" id="canvasExample"></canvas>Bạn có thể thấy trong code phía trên, Canvas element cho phép hai thuộc tính riêng biệt: width và height. Nếu bạn không cung cấp giá trị khác cho các thuộc tính trên, Canvas sẽ có giá trị mặc định của nó là width = 300 pixels và height = 150 pixels.
Thuộc tính id được sử dụng để xác định Canvas element trong code JavaScript. Hơn nữa, bạn có thể đưa vào các đặc tính định dạng CSS khác để làm cho vùng vẽ canvas tăng tính tương tác và rõ ràng hơn, ví dụ như padding, background color, hay border – giống như với bất kì thẻ HTML nào khác.
Vẽ trong Canvas như thế nào
Để vẽ graphic trong Canvas, ta cần bắt đầu bằng việc trỏ tới nó bằng việc sử dụng DOM (Document Object Model).
Và một thuộc tính id sẽ hỗ trợ để xác định vị trí mục tiêu (trong ví dụ HTML Canvas trên, id là “canvasExample”)
Khởi đầu, Canvas element là rỗng. Vì vậy, để trình bày gì đó, một kịch bản JavaScript cần để render môi trường bao trước khi vẽ lên nó.
Canvas element có một phương thức DOM được build sẵn là getContext. Nó là một hàm JavaScript sử dụng để truy cập tới môi trường bao cùng với phương thức vẽ. Hàm này cho phép một tham số đơn, thường là graphic 2D (được định nghĩa là “2d”).
Để rõ hơn, ta xem ví dụ phía dưới.
Ví dụ JavaScript Canvas Code
Một ví dụ dựng hình chữ nhật. Để dựng một hình chữ nhật trong Canvas, ta sẽ cần những những thuộc tính và hàm sau:
- fillStyle = “color”— xác định màu fill vào hình; nếu không thì hình sẽ có màu mặc định fill là màu đen
- fillRect (x, y, width, height) — vẽ lên một hình chữ nhật được tô màu theo “color” ở trên. Các tham số lần lượt xác định tọa độ x, y so với môi trường bao của canvas; chiều rộng và chiều cao của hình chữ nhật.
- strokeRect (x, y, width, height) — vẽ một hình chữ nhật không fill màu, có nét viền. Các tham số tương tự fillRect.
- clearRect (x, y, width, height) — xóa một khoảng bằng hình chữ nhật trong hình chữ nhật được chỉ định và làm cho phần đó hoàn toàn trong suốt.
Để xác định các tọa độ, ta sử dụng Canvas grid hay hệ thống tọa độ. Trong hệ thống này, điểm mốc được định vị tại góc trên cùng bên trái ngoài cùng của vùng bao Canvas, ở tọa độ (0,0).
Như vậy, tọa độ X sẽ di chuyển sang bên phải trong khi tọa độ Y sẽ di chuyển xuống dưới so với điểm mốc ban đầu. Khoảng cách được đo bằng pixels.
Đây là một ảnh chỉ ra cách hệ thống Canvas Grid hoạt động:
Mỗi một trong các hàm được nhắc đến ở trên để tạo hình chữ nhật sử dụng các tham số sau để biểu thị tọa độ và kích thước:
- x cho vị trí theo chiều ngang sang bên phải từ góc trên bên trái
- y cho vị trị theo chiều dọc xuống dưới từ góc trên cùng bên trái
- width cho chiều rộng của hình chữ nhật
- height cho chiều cao của hình chữ nhật
Đây là một ví dụ hướng dẫn code JavaScript canvas vẽ một hình chữ nhật:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript HTML5 Canvas Example</title>
</head>
<body onload="canvasExample()">
<canvas width="320" height="160" id="canvasExample"></canvas>
<script>
function canvasExample(){
//identify the Canvas element via the DOM
var canvas = document.getElementById("canvasExample");
//checking for Canvas browser compatibility
if(canvas.getContext){
//Use getContext to specify the rendering context
var context = canvas.getContext('2d');
//setting of color
context.fillStyle = "blue";
//creating the rectangle
context.fillRect(50,50,150,250);
context.clearRect(75,75,100,50);
context.strokeRect(90,90,75,20);
}else{
//providing a fallback option
alert("Please a Canvas-Supporting Web Browser");
}
}
</script>
</body>
</html>Đây là output trên trình duyệt:
Đây là những gì đã diễn ra trong kịch bản JavaScript:
- Trước tiên, Canvas element được xác định thông qua DOM
- Môi trường được khai báo
- Hàm fillRect() tạo ra một hình chữ nhật kích thước 150 x 250 pixels có fill màu.
- Lí do hình chữ nhật có màu xanh: hàm fillStyle thiết lập thuộc tính fill cho môi trường canvas là màu xanh nên hình chữ nhật được tạo ra có fill màu xanh.
- Lí do dù tham số chiều cao lớn hơn chiều rộng nhưng hình chữ nhật màu xanh lại có chiều rộng lớn hơn chiều cao: chiều cao vùng bao canvas là 160px nên chiều cao hiển thị tối đa của graphic là 160px. Hơn nữa, do có tọa độ y = 50px nên hình chữ nhật được hiển thị chỉ có chiều cao 110px, trong khi chiều rộng là 150px.
- Hàm clearRect() xóa một hình chữ nhật kích thước 100px * 50px. Vùng chữ nhật bị xóa có tọa độ (x, y) = (75, 75) nên sẽ nằm trong hình chữ nhật màu xanh.
- Cuối cùng, hàm strokeRect() tạo ra một hình chữ nhật có viền và không fill màu, có kích thước 75px * 20px. Hình chữ nhật này có tọa độ (x, y) = (90, 90) nên nằm trong vùng chữ nhật bị clear ở trên.
Tóm lại
Như đã vừa trình bày qua ví dụ về HTML5 Canvas ở trên, Canvas element cho phép ta sử dụng JavaScript để dễ dàng render đồ họa trên trình duyệt web.
Canvas rất tuyệt vì nó hoàn toàn mở (open-source), có tính tương tác cao, và rất linh hoạt. Nó chính là thứ bạn cần để thổi hồn vào ứng dụng của bạn và tăng tốc chúng.
Do đó, bạn sẽ cần học cách nó hoạt động và đưa kĩ năng dev web của mình lên một tầm cao mới.
Nguồn tham khảo tại đây.
Hy vọng bài viết trên có ích với các bạn. Xin cảm ơn.
Bình luận