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

Bởi Danh Do vào December 2015

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

1. Vẽ đường thẳng trong Canvas

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

Vẽ đường thẳng:

Để 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).

Ví dụ:

Trong đó chúng ta có:

Kết quả:

canvas-line

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.

Ví dụ:

Kết quả:

canvas-width-color

Định dạng hai đầ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:

Ví dụ:

Kết quả:

canvas-cap

2. 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àmlineTo().

Ví dụ:

Kết quả:

ve-nhieu-duong-thang-trong-canvas

3. Lời kết

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.

Bài này kết thúc tại đây, bài tiếp theo chúng ta tìm hiểu cách vẽ Curves.

Nguồn: http://freetuts.net/html5-canvas-ve-duong-thang-486.html