Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng HTML5 Canvas - Vẽ đường thẳng
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ị trí bắt đầu, vị trí kết thúc.
- Chiều rộng của đường thẳng.
- Màu của đường thẳng
- Định dạng hai đầu múi của đường thẳng.
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ụ: XEM DEMO
Bài viết này được đăng tại [free tuts .net]
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
// Lấy đối tượng Canvas
var canvas = document.getElementById('myCanvas');
// Chọn đối tượng vẽ 2D
var context = canvas.getContext('2d');
// Tiến hành vẽ
context.beginPath(); // Khai báo vẽ đường thẳng mới
context.moveTo(10, 10); // Điểm bắt đầu
context.lineTo(490, 190); // Điểm kết thúc
context.stroke(); // Tiến hành vẽ
</script>
Trong đó chúng ta có:
- Sử dụng hàm
beginPath()để khai báo một đường thẳng mới - Sử dụng hàm
moveTo(position)để xác định điểm bắt đầu. - Sử dụng
lineTo(position)để xác định điểm kết thúc - Sử dụng hàm
stroke()để tiến hành vẽ.
Kết quả:
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ụ: XEM DEMO
// Lấy đối tượng Canvas
var canvas = document.getElementById('myCanvas');
// Chọn đối tượng vẽ 2D
var context = canvas.getContext('2d');
// Tiến hành vẽ
context.beginPath(); // Khai báo vẽ đường thẳng mới
context.moveTo(10, 10); // Điểm bắt đầu
context.lineTo(380, 180); // Điểm kết thúc
context.lineWidth = 15; // rộng 15px
context.strokeStyle = 'blue';// Màu xanh
context.stroke(); // Tiến hành vẽ
Kết quả:
Đị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:
- butt : vuông góc tại điểm, có chiều bình thường
- round : bo tròn, dài hơn bình thường do hai đầu bổ sung một đoạn bo tròn.
- square : bo hình chữ nhật, dài hơn bình thường do hai đầu bổ sung đoạn hình chữ nhật.
Ví dụ: XEM DEMO
/*CANVAS THỨ NHẤT*/
var canvas = document.getElementById('myCanvas1');
var context = canvas.getContext('2d');
// Tiến hành vẽ
context.beginPath(); // Khai báo vẽ đường thẳng mới
context.moveTo(10, 10); // Điểm bắt đầu
context.lineTo(190, 10); // Điểm kết thúc
context.lineWidth = 15; // rộng 15px
context.strokeStyle = 'blue';// Màu xanh
context.lineCap = 'butt';
context.stroke(); // Tiến hành vẽ
/*CANVAS THỨ HAI*/
var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
// Tiến hành vẽ
context.beginPath(); // Khai báo vẽ đường thẳng mới
context.moveTo(10, 10); // Điểm bắt đầu
context.lineTo(190, 10); // Điểm kết thúc
context.lineWidth = 15; // rộng 15px
context.strokeStyle = 'pink';// Màu hồng
context.lineCap = 'round';
context.stroke(); // Tiến hành vẽ
/*CANVAS THỨ BA*/
var canvas = document.getElementById('myCanvas3');
var context = canvas.getContext('2d');
// Tiến hành vẽ
context.beginPath(); // Khai báo vẽ đường thẳng mới
context.moveTo(10, 10); // Điểm bắt đầu
context.lineTo(190, 10); // Điểm kết thúc
context.lineWidth = 15; // rộng 15px
context.strokeStyle = 'red';// Màu đỏ
context.lineCap = 'square';
context.stroke(); // Tiến hành vẽ
Kết quả:
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àm lineTo().
Ví dụ: XEM DEMO
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// Tiến hành vẽ
context.beginPath(); // Khai báo vẽ đường thẳng mới
context.moveTo(10, 10); // Điểm bắt đầu
context.lineTo(390, 10); // Điểm giữa
context.lineTo(20, 190); // Điểm giữa
context.lineTo(390, 190); // Điểm kết thúc
context.lineWidth = 15; // rộng 15px
context.strokeStyle = 'blue';// Màu xanh
context.lineCap = 'butt';
context.stroke(); // Tiến hành vẽ
Kết quả:
2. 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.
