Giới thiệu về Canvas

Được thêm vào trong phiên bản HTML5, Canvas 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 thông qua việc code một ví dụ vẽ ảnh sử dụng API này.

Canvas là gì?

Thẻ <canvas> trong HTML được sử dụng để vẽ các hình ảnh trong trang web.

Chẳng hạn, chúng ta có thể sử dụng canvas để vẽ các hình như:

Chúng ta sử dụng Javascript để vẽ hình trong canvas. Có thể xem cavas như là một tờ giấy trắng, chúng ta viết mã Javascript để vẽ lên tờ giấy trắng đó.

Có các phương thức để vẽ đường kẻ, hình hộp, đường cung, chữ và vẽ hình ảnh.

Ví dụ

Mã HTML để định nghĩa một canvas là như sau:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Trong đó:

• width và height là các thuộc tính để quy định kích thước của canvas
• id là thuộc tính để chúng ca có thể truy xuất được đối tượng canvas này từ mã JavaScript (thông qua phương thức document.getElementById()).

Vẽ đường thẳng

Chúng ta sử dụng phương thức lineTo() để vẽ một đường thẳng.

Vẽ đường tròn

Chúng ta sử dụng phương thức arc() để vẽ một đường tròn.

Vẽ chữ

Chúng ta sử dụng phương thức fillText() hoặc strokeText() để vẽ chữ.

Hoặc

Hiệu ứng Gradient

Chúng ta sử dụng phương thức createLinearGradient(), addColorStop() để tạo hiệu ứng gradient.

Hiệu ứng Gradient tròn

Chúng ta sử dụng phương thức createRadialGradient() để tạo hiệu ứng gradient tròn.

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.