Vẽ hình chữ nhật thông qua canvas trên JavaScript
Hình vuông và hình chữ nhật không nhất thiết phải
vẽ bằng sự kết hợp của moveTo,
lineTo - vì đã có các phương thức đơn giản hơn.
Hãy cùng phân tích chúng.
Phương thức strokeRect
Phương thức strokeRect(x, y, chiều rộng,
chiều cao) vẽ đường viền của
hình chữ nhật tại điểm đã cho. Hai tham số đầu tiên xác định
tọa độ của điểm, mà góc trên bên trái
của hình chữ nhật được vẽ sẽ nằm tại đó.
Hãy vẽ một hình chữ nhật bằng
strokeRect (giả sử ctx
đã tồn tại):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Phương thức fillRect
Phương thức fillRect(x, y, chiều rộng, chiều cao)
hoạt động tương tự như strokeRect,
chỉ khác là vẽ hình chữ nhật được tô đầy.
Hãy xem ví dụ:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Phương thức rect
Phương thức tiếp theo rect(x, y, chiều rộng,
chiều cao) cũng vẽ một hình chữ nhật. Nhưng
hình chữ nhật này chỉ trở nên nhìn thấy được
nếu áp dụng phương thức stroke hoặc fill.
Trong trường hợp đầu sẽ là đường viền, còn trường hợp thứ hai
là hình được tô đầy.
Hãy vẽ đường viền bằng rect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
Và bây giờ hãy vẽ hình được tô đầy:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Phương thức clearRect
Phương thức tiếp theo clearRect(x, y,
chiều rộng, chiều cao) hoạt động như một cục tẩy,
xóa sạch một vùng hình chữ nhật và làm cho
nội dung trở nên hoàn toàn trong suốt.
Hãy vẽ một hình vuông nhỏ bằng fillRect
và xóa một phần của nó bằng clearRect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
