Tọa độ Canvas HTML
Tọa độ canvas
Canvas HTML là một lưới hai chiều.
Góc trên bên trái của khung vẽ có tọa độ (0,0).
Di chuột qua hình chữ nhật bên dưới để xem tọa độ x và y của nó:
X
Y
Vẽ một hình chữ nhật
Để vẽ một hình chữ nhật trên khung vẽ, hãy sử dụng phương pháp sau:
-
fillRect(x, y, width, height)- xác định điểm bắt đầu cũng như chiều rộng và chiều cao của hình chữ nhật
Ví dụ
Xác định điểm bắt đầu ở vị trí (0,0) và chiều rộng và chiều cao là 150px và 75px:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 75);
</script> Hãy tự mình thử »Vẽ đường thẳng
Để vẽ một đường thẳng trên khung vẽ, 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 pháp "mực", như stroke() .
Ví dụ
Xác định điểm bắt đầu ở vị trí (0,0) và điểm cuối ở vị trí (200.100). Sau đó sử dụng phương thức stroke() để vẽ đường thẳng:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script> Hãy tự mình thử » 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 con đường -
arc(x, y, r, startangle, endangle)- tạo một cung/đường cong. Để tạo một đường tròn vớiarc(): Đặt startangle thành 0 và endangle thành 2*Math.PI. Tọa độ x và y xác định tâm của đường tròn. r xác định bán kính của đường tròn
Ví dụ
Xác định đường tròn bằng phương thức arc() . Sau đó sử dụng phương thức stroke() để vẽ hình tròn:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script> Hãy tự mình thử »