Trong bài viết này, mình sẽ hướng dẫn các bạn cách vẽ hình tròn trong Canvas một cách đơn giản nhất qua các ví dụ dưới đây.
Để vẽ được hình tròn trên <canvas>, ta sử dụng kết hợp hai phương thức sau:
- Trước tiên dùng phương thức arc(x, y, r, start, stop) dùng để vẽ cung tròn
- Rồi sau đó dùng phương thức fill() dùng để vẽ đường tròn.
Hướng dẫn
Bước 1: Tạo một trang HTML với thẻ canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Funny Circle</title>
</head>
<body>
<canvas id="myCanvas" width="1368px" height="768px" style="border:1px solid #d3d3d3;">
</body>
</html>
Bước 2: Vẽ một hình tròn đơn giản với kích thước cố định
Trong đoạn mã trên, chúng ta sử dụng phương thức arc() để vẽ một hình tròn. cx và cy là các toạ độ của hình tròn. r là bán kính của hình tròn.
Bước 3: Vẽ hình tròn với bán kính ngẫu nhiên
Trong đoạn mã trên, chúng ta sử dụng hàm Math.random() để sinh một bán kính ngẫu nhiên nằm trong khoảng từ 0-80.
Bước 4: Vẽ hình tròn với màu ngẫu nhiên
Ở đoạn mã trên, chúng ta đã tạo 2 hàm mới để phục vụ việc sinh ra một màu ngẫu nhiên:
- Hàm getRandomHex() sẽ sinh ra một số ngẫu nhiên nằm trong khoảng 0-255.
- Hàm getRandomColor() sinh ra một màu ngẫu nhiên.
Bước 5: Vẽ được hình tròn với vị trí ngẫu nhiên
Ở các ví dụ trên, chúng ta vẫn đang cố định vị trí của hình tròn ở toạ độ 500, 500. Ở bước này, chúng ta sẽ sinh toạ độ của hình tròn ngẫu nhiên.
Ở đoạn mã trên, chúng ta có sử dụng window.innerWidth và window.innerHeight là 2 thuộc tính trả về kích thước của cửa sổ trình duyệt.
Bước 6: Vẽ được 2 hình tròn.
Ở các bước trước, chúng ta chỉ mới tạo được 1 hình tròn. Ở bước này, chúng ta thử tạo 2 hình tròn.
Cách đơn giản để tạo 2 hình tròn đó là gọi phương thức createCircle() 2 lần liên tiếp nhau.
Bước 7: Tạo rất nhiều hình tròn.
Để tạo rất nhiều hình tròn, chúng ta không thể sử dụng phương thức như ở bước 6. Thay vào đó, chúng ta có thể sử dụng vòng lặp để đạt được mục tiêu này.
Trong đoạn mã trên, chúng ta đã sử dụng một vòng lặp for để tạo ra 30 hình tròn.
Như vậy, chúng ta đã tạo được một số hiệu ứng khá thú vị với các hình tròn.
Thông qua các bước ở trên, chúng ta đã luyện tập:
- Cách làm việc với đối tượng
- Truyền tham số vào cho đối tượng
- Sử dụng các thuộc tính của đối tượng
- Tạo các hàm để bổ sung tính năng cho ứng dụng
Các bạn có thể làm tiếp: Thêm hiệu ứng di chuyển cho các hình tròn.
Nếu các bạn gặp khó khăn, hãy comment xuống phía bên dưới để được hỗ trợ. Trong bài viết tiếp theo, mình sẽ hướng dẫn các bạn các bước để làm cho các hình tròn di chuyể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.
