Tìm hiểu về Canvas API trong HTML5
Được thêm vào trong phiên bản HTML5, Canvas API hỗ trợ việc vẽ đồ họa trên giao diện web nhờ sử dụng Javascript. Ví dụ như bạn có thể thực hiện việc vẽ các hình hay đoạn thẳng hoặc đường gấp khúc tùy ý, tô màu cho hình, chèn ảnh, hoặc thêm ứng dụng chuyển động cho hình hoặc ảnh.... Trong bài ...
Được thêm vào trong phiên bản HTML5, Canvas API hỗ trợ việc vẽ đồ họa trên giao diện web nhờ sử dụng Javascript. Ví dụ như bạn có thể thực hiện việc vẽ các hình hay đoạn thẳng hoặc đường gấp khúc tùy ý, tô màu cho hình, chèn ảnh, hoặc thêm ứng dụng chuyển động cho hình hoặc ảnh....
Trong bài viết này chúng ta sẽ tìm hiểu về Canvas API thông qua việc code một ví dụ vẽ ảnh sử dụng API này.
Canvas Là Gì
Canvas hay màn chắn được hiểu theo cách đơn giản là một tấm bảng trắng với kích thước xác định để bạn có thể vẽ lên trên đó. Một ví dụ thực tế là khi bạn đi chụp ảnh, thợ chụp sẽ tạo một màn chắn phía sau bạn để có thể sử dụng nó làm nền khi chỉnh sửa ảnh.
Canvas trong HTML cũng giống như một tấm bảng được đặt trên nền của trang web cụ thể là trong phần tử <body> để bạn có thể vẽ hình hình hoặc thêm ảnh vào trong canvas. Canvas chỉ hiển thị phần hình ảnh ở bên trong nó.
Thẻ Canvas
Trong HTML, Canvas được đánh dấu sử dụng thẻ <canvas></canvas> và thường đi với một id nhất định, ví dụ:
<canvas id="canvas"></canvas>
Bây giờ bạn hãy tạo một file HTML canvas.html với nội dung là đoạn mã lệnh như ở trên.
Javascript
Tiếp theo, chúng ta sẽ sử dụng mã lệnh Javascript để vẽ hình vuông trong canvas mới được tạo ra. Ở file canvas.html như ở trên thêm đoạn mã javascript như sau:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
Hoặc bạn cũng có thể sử dụng công cụ jsFiddle để viết mã Javascript và HTML như ở dưới đây:
Ở đoạn mã javascript phía trên chúng ta thấy dòng đầu tiên được sử dụng để tạo đối tượng canvas tham chiếu tới phần tử với id là canvas:
var canvas = document.getElementById("canvas");
Khi vẽ, mỗi một canvas sử dụng context riêng để phân biệt với các canvas khác có trên trang. Đoạn mã phía sau sẽ tạo context cho đối tượng canvas mà chúng ta mới tạo ở phía trên:
var ctx = canvas.getContext("2d");
Tiếp theo phương thức fillStyle() được sử dụng để tạo màu nền green cho canvas:
ctx.fillStyle = "green";
Cuối cùng chúng ta sử dụng phương thức fillRect() để bắt đầu vẽ hình vuông trên canvas. Phương thức này nhận vào 4 đối số là giá trị tọa độ của 4 góc hình vuông chúng ta muốn vẽ:
ctx.fillRect(10, 10, 100, 100);
Sau đó dùng trình duyệt để mở file canvas.html bạn sẽ thấy kết quả giống như phía dưới:
