HTML5 09 – Vẽ đường thẳng trong Canvas HTML5

0
46

Trong bài số 9 này, chúng ta sẽ tìm hiểu cách vẽ 1 đường thẳng trong Canvas.

Vẽ đường thẳng trong Canvas

Một đường thẳng có các tính chất sau:

  • Điểm bắt đầu, điểm kết thúc
  • Độ rộng đường thẳng
  • Màu đường thẳng

1. Vẽ đường thẳng với lệnh moveTo và lineTo

Để vẽ đường thẳng chúng ta phải xác định vị trí bắt đầu và vị trí kết thúc, mỗi vị trí sẽ được xác định bởi khoảng cách so với lề trái và khoảng cách so với lề trên (trái, trên)

Thường để vẽ các đường đầu tiên gọi beginPath() để khởi tạo một pathmới (nó chứa tập hợp các lệnh đường cần vẽ). Cuối cùng để thực hiện vẽ tập đó gọi hàm stroke()

Để vẽ đường thẳng, chúng ta sử dụng phương thức getContext mô tả việc vẽ 2D.

Phương thức moveTo để xác định điểm bắt đầu vẽ và phương thức lineTo xác định điểm kết thúc. Phương thức stroke dùng để vẽ đường thẳng từ điểm bắt đầu đến điểm kết thúc.

  • beginPath() : Khai báo vẽ đường thẳng mới
  • moveTo(x1,y1) : Di chuyển tới điểm (x1,y1)
  • lineTo(x2,y2) : Kẻ đường tới điểm (x2,y2)
  • stroke() : Tiến hành vẽ

See the Pen <a href=”https://codepen.io/nguyn-hng-lan/pen/eLYajM/”>vẽ đường thẳng</a> by Nguyễn Hương Lan (<a href=”https://codepen.io/nguyn-hng-lan”>@nguyn-hng-lan</a>) on <a href=”https://codepen.io”>CodePen</a>.<br />

2. Chiều rộng và màu của đường thẳng

Để chọn chiều rộng cho đường thẳng thì ta sử dụng thuộc tính lineWidth, để chọn màu ta sử dụng thuộc tính strokeStyle.

(Các bạn có thể xem ví dụ ở trên).

3. Định dạng 2 đầu đường thẳng

Định dạng hai đầu đường thẳng hay còn gọi là Line Cap.

Để định dạng line Cap thì ta sử dụng thuộc tính lineCap và nó sẽ có một trong ba giá trị sau:

  • butt : vuông góc tại điểm, có chiều bình thường
  • round : bo tròn, dài hơn bình thường do hai đầu bổ sung một đoạn bo tròn.
  • square : bo hình chữ nhật, dài hơn bình thường do hai đầu bổ sung đoạn hình chữ nhật.

Ví dụ:

Vẽ đường thẳng nối liên tiếp trong Canvas

Các ví dụ trên chỉ dừng lại ở mức vẽ một đường thẳng, tuy nhiên bạn có thể vẽ nhiều đường thẳng liên tiếp bằng cách sử dụng hàm lineTo().

Ví dụ:

Kết luận

Như vậy để vẽ một đường thẳng thì ta phải xác định hai điểm ở hai đầu của đường thẳng, mỗi đường thẳng sẽ có một số thuộc tính bổ sung như chiều rộng của đường, màu của đường và định dạng hai đầu của đường.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây