post-image

Vẽ đường thẳng trong Canvas

Canvas

Giới thiệu

Trong bài viết này, mình sẽ hướng dẫn các bạn cách vẽ đường thẳng trong Canvas một cách đơn giản nhất.

Để vẽ được đường thẳng bằng HTML5 Canvas thì cực kỳ đơn giản. Giống như vẽ một đường thẳng trên giấy, ta xác định điểm bắt đầu và điểm kết thúc của đường thẳng đó rồi kẻ lên là được. Cùng tìm hiểu các bước như sau:

Ve duong thang trong Canvas 1
  • Đầu tiên, sử dụng phương thức beginPath() để khai báo một đường thẳng mới
  • Sử dụng phương thức moveTo(x, y) để xác định điểm bắt đầu
  • Sử dụng phương thức lineTo(x, y) để xác định điểm kết thúc
  • Cuối cùng sử dụng phương thức stroke() để tiến hành vẽ đường thẳng

Vẽ đường thẳng

Ví dụ: Vẽ đường thẳng từ vị trí (10, 45) đến (180, 40).

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw a line</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="200"></canvas>  
<script>  
var canvas = document.getElementById('DemoCanvas');
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();
   }
</script> 
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw a line</title>
</head>
<body>
<canvas id="DemoCanvas" width="400" height="400"></canvas>  
<script>  
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 <400; i += 20) 
	     {
		   ctx.moveTo(i, 0);
		   ctx.lineTo(i,canvas.width/2);
		   ctx.stroke();
		  }
  } 
</script>  
</body>
</html>

Độ rộng của đường thẳng

Thuộc tính lineWidth cho biết độ rộng (tính bằng pixel) của đường thẳng. Giá trị thuộc tính là một số dương (giá trị mặc định 1).

Ví dụ: Vẽ một loạt các đường thẳng bằng cách sử dụng các giá trị tăng dần (1 đến 12) cho thuộc tính lineWidth.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw lines of various width</title>
</head>
<body>
<canvas id="DemoCanvas" width="1000" height="400"></canvas>
<script>
var canvas = document.getElementById('DemoCanvas');
var count = 1;
if (canvas.getContext) 
 {
  var ctx = canvas.getContext("2d");
  var count = 1;
     for (i = 0; i < 360; i += 30) 
	     {
       ctx.beginPath();
       ctx.lineWidth = count;
		   ctx.moveTo(0, i);
		   ctx.lineTo(canvas.width, i);
		   ctx.stroke();
       count++;
       }
  } 
</script>  
</body>
</html>

Màu sắc của đường thẳng

Để vẽ các đường thẳng màu sắc, 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.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw lines of various width</title>
</head>
<body>
<canvas id="DemoCanvas" width="400" height="400"></canvas>  
<script>
var canvas = document.getElementById('DemoCanvas');
if (canvas.getContext) 
{
 var context = canvas.getContext("2d");
 context.beginPath();
  context.moveTo(50, 10);
  context.lineTo(50, 200);
  context.lineWidth = 5;
  // set line color
  context.strokeStyle = 'red';
  context.stroke();
  context.beginPath();
  context.moveTo(100, 10);
  context.lineTo(100, 200);
  context.lineWidth = 5;
  // set line color
  context.strokeStyle = 'green';
  context.stroke();
  context.beginPath();
  context.moveTo(150, 10);
  context.lineTo(150, 200);
  context.lineWidth = 5;
  // set line color
  context.strokeStyle = '#2E1919';
  context.stroke();
  context.stroke();
  context.beginPath();
  context.moveTo(200, 10);
  context.lineTo(200, 200);
  context.lineWidth = 5;
  // set line color
  context.strokeStyle = '#3B4839';
  context.stroke();   
}
</script>  
</body>
</html>

Mũ của đường thẳng

Thuộc tính lineCap dùng để thiết lập hoặc trả về kiểu mũ cho 2 đầu đường thẳng.

Có 3 kiểu mũ:

  • butt: Mặc định. Một cạnh phẳng được đặt vuông góc với mỗi đầu của đường thẳng mà không có mũ nào được thêm vào.
  • round: Một mũ hình bán nguyệt hoặc hình tròn được thêm vào mỗi đầu của đường thẳng.
  • square: Một mũ hình vuông được thêm vào mỗi đầu của đường thẳng.

Lưu ý: Giá trị “round” và “square” sẽ làm cho đường thẳng hơi dài hơn.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Line Cap</title>
</head>
<body>
<canvas id="DemoCanvas" width="400" height="400"></canvas>  
<script>
var canvas = document.getElementById('DemoCanvas');
if (canvas.getContext) 
{
 var context = canvas.getContext("2d");
 // butt line cap (first line)
      context.beginPath();
      context.moveTo(20,20);
      context.lineTo(20,200);
      context.lineWidth = 25;
      context.strokeStyle = '#ff0000';
      context.lineCap = 'butt';
      context.stroke();

  // round line cap (second line)
      context.beginPath();
      context.moveTo(80,20);
      context.lineTo(80,200);
      context.lineWidth = 25;
      context.strokeStyle = '#ff0000';
      context.lineCap = 'round';
      context.stroke();

 // square line cap (third line)
      context.beginPath();
      context.moveTo(120,20);
      context.lineTo(120,200);
      context.lineWidth = 25;
      context.strokeStyle = '#ff0000';
      context.lineCap = 'square';
      context.stroke();
}
</script>  
</body>
</html>

Góc của đường thẳng

Thuộc tính lineJoin dùng để thiết lập hoặc trả về kiểu của góc được tạo bởi 2 dòng kẻ.

Có 3 kiểu góc:

  • bevel: tạo ra góc xiên
  • round: tạo ra góc tròn
  • square (mặc định): tạo ra góc nhọn

Ví dụ:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>Line Joining</title>
 </head>
 <body>
 <canvas id="DemoCanvas" width="400" height="400"></canvas>  
<script>
var canvas = document.getElementById('DemoCanvas');
if (canvas.getContext) 
{
   var ctx = canvas.getContext("2d");
   var lStart = 50;
   var lEnd = 200;
   var yStart = 20;
   ctx.beginPath();
   ctx.lineWidth = 25;
// Use a bevel corner.
   ctx.lineJoin = "bevel";
   ctx.moveTo(50, 20);
   ctx.lineTo(150, 20);
   ctx.lineTo(150, 120);
   ctx.stroke();
// Use a round corner.             
   ctx.beginPath();
   ctx.lineJoin = "round";
   ctx.moveTo(50, 140);
   ctx.lineTo(150, 140);
   ctx.lineTo(150, 260);
   ctx.stroke();
// Use a miter.      
   ctx.beginPath();
   ctx.lineJoin = "miter";
   ctx.moveTo(50, 280);
   ctx.lineTo(150, 280);
   ctx.lineTo(150, 400); 
   ctx.stroke();
 }
</script>
</body>
</html>

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Trở thành lập trình viên từ con số 0
Tags:
,

Leave a Reply

Your email address will not be published. Required fields are marked *