HTML
HTML5
CANVAS
HEADING TAGS
FORM TAGS
LIST TAGS
PARAGRAPH TAGS
p br pre
COMMON TAGS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
  • 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" 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ả:

canvas line PNG

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ả:

canvas width color png

Đị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ả:

canvas cap png

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ả:

ve nhieu duong thang trong canvas png

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.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top