HTML5 13 – Nối nhiều đường trong Canvas HTML5

0
138

Chúng ta đã được học cách vẽ một số đường thẳng trong Canvas rồi, vậy thì trong bài này mình sẽ hướng dẫn bạn cách nối các đường đó với nhau tạo nên những hình vẽ sinh động hơn rất nhiều.

Nối nhiều đường với nhau trong Canvas

Như ta biết trong Canvas ta sử dụng hàm beginPath()dùng để khai báo bắt đầu vẽ một hình mới. Như vậy để nối nhiều đường với nhau thì ta chỉ khai báo nó đúng một lần đầu tiên thôi, sau đó dựa vào cú pháp của mỗi đường để xác định các điểm vẽ.

Ví dụ: Vẽ 1 hình sử dụng 2 đường thẳng, 1 đường bậc 2 và 1 đường Bezier bậc 3.

Thuộc tính line join trong Canvas

Trong Canvas có thuộc tính lineJoin giúp chúng ta chọn lựa cách nối giữa hai đường thẳng (giao điểm).

Có ba cách nối như sau:

  • miter: bo thành góc nhọn
  • round: bo tròn góc tròn
  • bevel: bo thành góc nhọn nhưng bị mất phần trên đỉnh

Kết luận

Trong bài này chúng ta đã học một số cách nối các đường với nhau để tạo thành một đường dài đa dạng, kết hợp các cách này bạn sẽ tạo ra những hình vẽ cực kì ấn tượng. Tuy nhiên khi làm việc với Canvas thật sự rất khó khăn bởi khâu tính tọa độ rất dài dòng và phức tạp. Bài tiếp theo chúng ta sẽ tìm hiểu cách vẽ một số hình đặc biệt với Canvas.

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