Hướng dẫn how to draw lines in html - cách vẽ đường trong html

Vẽ các đường

Để vẽ một dòng bằng cách sử dụng Canvas HTML5 rất đơn giản, giống như vẽ một đường trên giấy, xác định một đường dẫn và sau đó lấp đầy đường dẫn. Xem các bước sau:

• Đặt lại đường dẫn hiện tại bằng phương thức BeginPath ().
• Để di chuyển con trỏ bản vẽ để bắt đầu điểm để tạo phương pháp SubPath mới bằng phương thức Moveto (X, Y).
• Bây giờ sử dụng phương pháp Lineto (X, Y), thêm một điểm mới và kết nối điểm này với điểm bắt đầu bằng cách sử dụng một đường thẳng.
• Cả hai phương thức trên đều chấp nhận các tham số X và Y cho biết chính xác nơi bạn muốn vẽ dòng.
• Cuối cùng sử dụng phương thức Stroke () để làm cho dòng hiển thị.

Trình bày bằng hình ảnh:

Ví dụ: Vẽ một dòng đơn giản

Mã sau đây sẽ vẽ một dòng đơn giản từ (10,45) đến (180,40).

Đầu ra:

Ví dụ: Vẽ các đường ngang và dọc

Ví dụ mã sau sử dụng các phương thức Moveto và Lineto để tăng dần các đường ngang và dọc trên khung vẽ.

Output:

Chiều rộng dòng

Thuộc tính linwidth cho chiều rộng (tính bằng pixel) của các dòng. Giá trị thuộc tính là một số dương (giá trị mặc định 1). Khi cài đặt, các giá trị bằng không, âm và NAN phải được bỏ qua, để lại giá trị không thay đổi. Ví dụ sau đây vẽ một loạt các dòng bằng cách sử dụng các giá trị ngày càng tăng (1 đến 12) cho thuộc tính linorwidth.

Đầu ra:

Đường màu

Để vẽ các dòng màu, bạn có thể sử dụng thuộc tính Strokestyle, màu mặc định là màu đen. Cú pháp của thuộc tính là object.strokestyle = color. Đây là một ví dụ :

LINE MAP

Thuộc tính linecap được sử dụng để có hoặc đặt kiểu nắp dòng hiện tại. Có ba kiểu mũ:

• Mông: Mặc định. Một cạnh phẳng được đặt vuông góc với mỗi đầu của dòng mà không có nắp được thêm vào.
• Vòng: Một nắp kết thúc hình bán nguyệt hoặc tròn được thêm vào mỗi đầu của dòng.
• Hình vuông: Một nắp đầu vuông được thêm vào mỗi đầu của dòng.

Đây là một ví dụ :

Đầu ra:

Ví dụ: Vẽ các đường ngang và dọc

Ví dụ mã sau sử dụng các phương thức Moveto và Lineto để tăng dần các đường ngang và dọc trên khung vẽ.

• Chiều rộng dòng
• Thuộc tính linwidth cho chiều rộng (tính bằng pixel) của các dòng. Giá trị thuộc tính là một số dương (giá trị mặc định 1). Khi cài đặt, các giá trị bằng không, âm và NAN phải được bỏ qua, để lại giá trị không thay đổi. Ví dụ sau đây vẽ một loạt các dòng bằng cách sử dụng các giá trị ngày càng tăng (1 đến 12) cho thuộc tính linorwidth.
• Đầu ra:

Đường màu

Đầu ra:

Ví dụ: Vẽ các đường ngang và dọc

Ví dụ mã sau sử dụng các phương thức Moveto và Lineto để tăng dần các đường ngang và dọc trên khung vẽ. HTML5 Canvas Tutorial
Next: HTML5 Canvas arcs tutorial