Tọa độ Canvas HTML
Tọa độ Canvas
Khung HTML là một lưới hai chiều.
Góc trên bên trái của canvas có tọa độ (0,0)
Trong chương trước, bạn đã thấy phương thức này được sử dụng: fillRect (0,0,150,75).
Điều này có nghĩa là: Bắt đầu ở góc trên bên trái (0,0) và vẽ một hình chữ nhật 150x75 pixel.
Ví dụ về tọa độ
Di chuột qua hình chữ nhật bên dưới để xem tọa độ x và y của nó:
Vẽ đường thẳng
Để vẽ một đường thẳng trên canvas, hãy sử dụng các phương pháp sau:
- moveTo ( x, y ) - xác định điểm bắt đầu của dòng
- lineTo ( x, y ) - xác định điểm kết thúc của dòng
Để thực sự vẽ đường thẳng, bạn phải sử dụng một trong các phương thức "mực", như stroke ().
Thí dụ
Xác định điểm bắt đầu ở vị trí (0,0) và điểm kết thúc ở vị trí (200,100). Sau đó, sử dụng phương thức stroke () để thực sự vẽ đường:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Vẽ một vòng tròn
Để vẽ một vòng tròn trên canvas, hãy sử dụng các phương pháp sau:
- beginPath () - bắt đầu một đường dẫn
- arc (x, y, r, startangle, endangle) - tạo một cung / đường cong. Để tạo đường tròn với cung (): Đặt góc bắt đầu bằng 0 và góc kết thúc bằng 2 * Math.PI. Các tham số x và y xác định tọa độ x và y của tâm đường tròn. Tham số r xác định bán kính của hình tròn.
Thí dụ
Định nghĩa một đường tròn bằng phương thức arc (). Sau đó, sử dụng phương thức stroke () để thực sự vẽ hình tròn:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();