NỘI DUNG BÀI VIẾT
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:
- Đầ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 trong Canvas
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>Code language: HTML, XML (xml)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>Code language: HTML, XML (xml)Độ rộng của đường thẳng trong Canvas
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>Code language: HTML, XML (xml)Màu sắc của đường thẳng trong Canvas
Để 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>Code language: HTML, XML (xml)Mũ của đường thẳng trong Canvas
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>Code language: HTML, XML (xml)Góc của đường thẳng trong Canvas
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>Code language: HTML, XML (xml)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.
