Tọa độ Canvas HTML
- Trang trước Vẽ Canvas
- Trang tiếp theo Đường thẳng Canvas
Khóa học đề xuất:
Tọa độ canvas
Canvas HTML là một lưới hai chiều.
Tọa độ góc trên cùng bên trái của canvas là (0,0).
Ý nghĩa là: bắt đầu vẽ một hình vuông 150x75 pixel từ góc trên cùng bên trái (0,0).
Mô hình tọa độ
Đặt con trỏ chuột lên hình vuông dưới đây để xem tọa độ x và y của nó:
Vẽ đường
Để vẽ đường thẳng trên canvas, hãy sử dụng các phương thức sau:
- moveTo(x,y) - Định nghĩa điểm bắt đầu của đường
- lineTo(x,y) - Định nghĩa điểm kết thúc của đường
Để vẽ đường thực tế, bạn phải sử dụng một trong các phương thức "màu sắc", chẳng hạn như stroke().
Mô hình
Định nghĩa điểm bắt đầu tại vị trí (0,0), điểm kết thúc tại vị trí (200,100). Sau đó sử dụng phương thức stroke() để vẽ đường thực tế:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Vẽ hình tròn
Để vẽ hình tròn trên canvas, hãy sử dụng các phương thức sau:
- beginPath() - Bắt đầu một đường dẫn
- arc(x,y,r,startangle,endangle) - Tạo đoạn đường tròn/đường cong
Để tạo vòng tròn bằng phương thức arc(): hãy đặt góc bắt đầu là 0, góc kết thúc là 2 * Math.PI. Các tham số x và y định nghĩa tọa độ x và y của tâm vòng. Tham số r định nghĩa bán kính của vòng.
Mô hình
Sử dụng phương thức arc() để định nghĩa một vòng tròn. Sau đó sử dụng phương thức stroke() để vẽ tròn thực tế:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Xin xem thêm:
- Trang trước Vẽ Canvas
- Trang tiếp theo Đường thẳng Canvas
