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:

Draw a line


  
  
var canvas = document.getElementById['DemoCanvas'];
//Always check for properties and methods, to make sure your code doesn't break in other browsers.
if [canvas.getContext] 
 {
  var context = canvas.getContext['2d'];
  // Reset the current path
  context.beginPath[]; 
  // Staring point [10,45]
   context.moveTo[10,45];
  // End point [180,47]
  context.lineTo[180,47];
  // Make the line visible
  context.stroke[];
   }
 

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:

Draw a line


  
  
var canvas = document.getElementById['DemoCanvas'];
if [canvas.getContext] 
 {
  var ctx = canvas.getContext["2d"];
     for [i = 10; i < 200; i += 20] 
	     {
		   ctx.moveTo[0, i];
		   ctx.lineTo[canvas.width, i];
		   ctx.stroke[];
		  }
     for [i = 10; i