Chủ đề nổi bật

Bài 02: 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 ...

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

<canvas id="myCanvas" awidth="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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

HTML5 căn bản | HTML5 là gì?

Trong bài này chúng ta sẽ cùng tìm hiểu một số thẻ HTML được bổ sung vào trong phiên bản HTML5, các thẻ này sinh ra nhằm mục đích giúp ta chia khối cho trang web rõ ràng hơn. Nhưng trước tiên chúng ta cần tìm hiểu khái niệm HTML5 là gì đã nhé. HTML5 là gì? Trong 4 năm gần đây bạn ...

HTML căn bản

Trước khi bắt đầu học làm web thì ban phải học HTML và CSS vì hai ngôn ngữ này giúp bạn xây dựng giao diện của website, đẹp hay xấu là phụ thuộc vào cách sử dụng và trình bày bổ cục hợp lý. Nhằm giúp bạn cũng cố lại các thẻ html thì trong phần này mình sẽ giới thiệu các thành phần thường được dùng ...

HTML5 Canvas

Trong bài này chúng ta sẽ tìm hiểu một đối tượng rất hay trong HTML5 đó là thẻ canvas, thẻ này thường được dùng để vẽ đồ họa, làm web game. Canvas là một thẻ mới trong HTML5 và nhiệm vụ của nó là giống như màn hình Tivi vậy, nó sẽ hiển thị kết quả đồ họa của một chường trình Javascript. Như ...

Bài 04: HTML5 Canvas - Nối nhiều đường

Chúng ta đã được học cách vẽ một số đường thẳng trong Canvas rồi nhỉ, vậy thì trong bài này mình sẽ hướng dẫn bạn cách nối các đường đó với nhau ...

Bài 03: HTML5 Canvas - Vẽ đường cong

Ngoài vẽ đường thẳng ra thì Canvas còn có thể vẽ các đường cong như hình cung, đường cong bậc hai, đường cong Benzier. Đối với cách vẽ đường thẳng ...

Bài 02: Thêm Article Trong HTML5

Bài trước chúng ta đã được tìm hiểu cấu trúc một template chuẩn HTML5 nhưng chỉ mới học cách sử dụng đơn giản, nên trong bài này ta sẽ đi sâu vào ...

Bài 02: 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 ...

Bài 01: Tạo Template HTML5 Đầu Tiên

Nếu bạn mới bắt đầu học HTML5 thì điều bạn quan tâm đầu tiên chính là cấu trúc một website xây dựng bằng html5 sẽ như thế nào? Chờ gì nữa ta bắt ...

Bài 01: HTML5 Canvas là gì?

Trong bài này chúng ta sẽ tìm hiểu một thẻ HTML5 dùng để xây dựng Graphic đồ họa đó là thẻ Canvas. Ví dụ bạn muốn vẽ một sơ đồ hình học thì ...