Vẽ đường thẳng qua canvas trên JavaScript
Hãy bắt đầu với điều đơn giản - vẽ đường thẳng. Để hiểu cách thực hiện, hãy tưởng tượng rằng bạn có một tờ giấy và một cây bút chì. Bạn có thể vẽ trên tờ giấy đó, hoặc có thể không vẽ mà chỉ đơn giản di chuyển bút chì đến điểm mong muốn.
JavaScript cũng hoạt động tương tự: nó có
một cây bút chì (hoặc ngòi bút để vẽ), bạn có thể di chuyển nó đến
vị trí mong muốn bằng phương pháp
moveTo, và vẽ - bằng phương pháp
lineTo.
Cả hai phương pháp đều nhận tham số là điểm để
di chuyển đầu bút - tham số đầu tiên là
tọa độ theo chiều ngang, và tham số thứ hai - theo
chiều dọc. Gốc tọa độ - điểm 0,
0 - là góc trên bên trái của phần tử.
Khi ngòi bút di chuyển đến điểm mong muốn -
phương pháp moveTo chỉ đơn giản di chuyển, còn
lineTo trong quá trình di chuyển sẽ vẽ
một đường thẳng từ vị trí hiện tại của bút đến điểm
mà nó sẽ di chuyển tới.
Tuy nhiên, nếu chạy đoạn mã trên
- sẽ không có gì xảy ra: cần viết
thêm hai lệnh nữa: lệnh đầu tiên beginPath
phải được chỉ định trước khi bắt đầu vẽ
đường thẳng, và lệnh thứ hai stroke phải
được gọi sau tất cả các kết hợp moveTo
và lineTo để đường thẳng được vẽ ra.
Vậy, hãy viết mã hoạt động để vẽ đường thẳng:
Hãy vẽ một đường thẳng
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Hãy vẽ một con chim
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Hãy vẽ một hình tam giác
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Hãy vẽ một hình vuông nhỏ
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Đóng kín hình
Để vẽ một hình khép kín không nhất thiết
phải vẽ tất cả các đường - đường cuối cùng có thể
được vẽ tự động và đóng kín hình.
Để làm điều này, trước phương pháp stroke nên
gọi phương pháp closePath.
Phương pháp này cố gắng đóng hình lại bằng cách vẽ một đường thẳng từ điểm kết thúc đến điểm bắt đầu. Nếu hình đã được đóng kín hoặc là chỉ một điểm, thì phương pháp không làm gì cả.
Hãy vẽ một hình tam giác, sử dụng closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - bỏ qua bước này
ctx.closePath();
ctx.stroke();
:
Tô màu hình
Thay vì phương pháp stroke có thể sử dụng
phương pháp fill - khi đó hình không nhất thiết
phải được đóng kín hoàn toàn - nó sẽ được tô màu
dù thế nào đi nữa:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - bỏ qua bước này
//ctx.closePath(); - và bước này cũng vậy
ctx.fill();
:
