Tọa độ Canvas
HTML canvas là một không gian hai chiều.
Phía trên góc trái của Canvas có tọa là (0,0)
Phía trên góc trái của Canvas có tọa là (0,0)
Trong bài trước, bạn đã thấy phương thức này được sử dụng: fillRect(0,0,150,75).
Nó có nghĩa là: Bắt đầu ở góc trên bên trái với tọa độ (0,0) và vẽ một hình chữ nhật với kích thước dài x rộng là 150x75 pixels.
Ví dụ
(42,48) là tọa độ điểm màu đỏ như hình bên dưới.
Vẽ một đường thẳng
Để vẽ một đường thẳng trên một Canvas, sử dụng những phương thức sau đây:
Để thực sự vẽ được một đường thẳng, bạn phải sử dụng một trong những phương thức như stroke().
- moveTo(x,y) - định nghĩa điểm bắt đầu của đường thẳng
- lineTo(x,y) - định nghĩa điểm kết thúc của đường thẳng
Để thực sự vẽ được một đường thẳng, bạn phải sử dụng một trong những phương thức như stroke().
Ví dụ
Định nghĩa một điểm bắt đầu ở vị trí (0,0), và một điểm kết thúc ở vị trí (200,100).
Sau đó sử dụng phương thức stroke() để vẽ ra một đường thẳ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 trong trên một Canvas, sử dụng những phương thức sau đây:
- beginPath() - bắt đầu một đường/vòng tròn
- arc(x,y,r,startangle,endangle) - tạo một cung/đường cong. Để tạo một vòng tròn với phương thức arc(): Thiết lập góc ban đầu là 0 và góc kết thúc là 2*Math.PI. Những tham số x, y định nghĩa tọa độ x và y của tâm vòng tròn. Tham số r định nghĩa bán kính của vòng tròn.
Ví dụ
Định nghĩa một vòng tròn với phương thức arc(). Sau đó sử dụng phương thức stroke() để thực hiện vẽ vòng 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();
Trương Đức Tài.
