Share Tìm hiểu về Canvas trong HTML5

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
HTML5 hiện nay đang chiếm giữ vị trí quan trọng trong lĩnh vực web, với các ưu điểm vượt trội giúp HTML5 có sức mạnh vượt ra ngoài phạm vị khi không chỉ là dùng để thiết kế các website thông thường mà HTML5 còn được sử dụng để thiết kế các game trên nền web. Và Canvas là một thành phần rất quan trọng trong HTML5 phục vụ các yêu cầu cao cấp này.

Canvas là một phần tử của HTML5, cho phép thực hiện lập trình kết xuất đồ họa các đối tượng hai chiều trên website. Canvas chiếm một khu vực trong trang web với chiều rộng và chiều cao được định trước. Sau đó sử dụng JavaScript, các bạn có thể tương tác với khu vực này để vẽ thông qua một tập các hàm đồ họa tương tự như các API 2D khác.

Canvas có thể giúp các bạn tạo ra các sơ đồ đơn giản, các biểu đồ, các chuyển động, vẽ các hình ảnh hai chiều, ba chiều... Vì vậy, Canvas có thể hỗ trợ cho các bạn trong việc lập trình thiết kế các ứng dụng game, các ứng dụng như bản vẽ, tương tác đồ hoạ,... Tuy nhiên, bản thân Canvas không thể tự mình hoàn thiện bất kỳ chương trình nào mà cần phải có một ngôn ngữ máy khách như JavaScript để lập trình tương tác, các bạn có thể hình dung Canvas như là một môi trường cho phép JavaScript tương tác để tạo ra sản phẩm.

Trong HTML5, Canvas được thể hiện bằng thẻ <canvas> và thẻ <canvas> cũng có thể chứa các thuộc tính cơ bản như width, height, style,... của HTML, ví dụ như sau:
HTML:
<canvas id="canvas" width="500" height="300" style="background-color: #0062af;"></canvas>
Các bạn cũng có thể sử dụng JavaScript để vẽ hình ảnh trong Canvas, ví dụ như sau:
JavaScript:
//Chỉ định đối tượng canvas và khởi tạo đối tượng đồ hoạ
var canvas    = document.getElementById('canvas');
var context   = canvas.getContext('2d');

//Chỉ định kiểu và vẽ hình chữ nhật
context.fillStyle = '#fff';
context.fillRect(0, 0, 150, 75);
Trên đây chỉ là một ví dụ đơn giản về Canvas trong HTML5, các bạn có thể tìm hiểu thêm về Canvas tại địa chỉ https://www.w3schools.com/graphics/canvas_intro.asp.
 
Back
Top