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 - 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 tạo nên những hình vẽ sinh động hơn rất nhiều.

1. Nối nhiều đường với nhau trong Canvas

Như ta biết trong Canvas ta sử dụng hàm beginPath() dùng để khai báo bắt đầu vẽ một hình mới. Như vậy để nối nhiều đường với nhau thì ta chỉ khai báo nó đúng một lần đầu tiên mà thôi, sau đó dựa vào cú pháp của mỗi đường để xác định các điểm vẽ.

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í dụ: Vẽ một hình như sau

ve nhieu hinh trong canvas png

Trước tiên ta phân tích hình này như sau:

html5 canvas paths diagram png

Như vậy ta sẽ sử dụng hai đường thẳng, một đường bậc hai (quadratic) và một đường Benzier.

Bài giải: XEM DEMO

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(100, 20);

// line 1
context.lineTo(200, 160);

// quadratic curve
context.quadraticCurveTo(230, 200, 250, 120);

// bezier curve
context.bezierCurveTo(290, -40, 300, 200, 400, 150);

// line 2
context.lineTo(500, 90);

context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();

2. Thuộc tính line join trong Canvas

Trong Canvas có thuộc tính lineJoin giúp chúng ta chọn lựa cách nối giữa hai đường thẳng (giao điểm). Nó có ba cách nối như sau:

  • miter: bo thành góc nhọn
  • round: bo tròn góc nối
  • bevel: bo thành góc nhọn nhưng bị mất phần trên đỉnh

Ví dụ: XEM DEMO

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// set line width for all lines
context.lineWidth = 25;
context.strokeStyle = 'blue';

// miter line join (left)
context.beginPath();
context.moveTo(99, 150);
context.lineTo(149, 50);
context.lineTo(199, 150);
context.lineJoin = 'miter';
context.stroke();

// round line join (middle)
context.beginPath();
context.moveTo(239, 150);
context.lineTo(289, 50);
context.lineTo(339, 150);
context.lineJoin = 'round';
context.stroke();

// bevel line join (right)
context.beginPath();
context.moveTo(379, 150);
context.lineTo(429, 50);
context.lineTo(479, 150);
context.lineJoin = 'bevel';
context.stroke();

Kết quả:

line join canvas png

3. Hàm arcTo() trong Canvas

Hàm arcTo() dùng để tạo một vòng cung trong Canvas với điểm bắt đầu là một điểm cho trước, nghĩa là nó dùng để nối tiếp một đường nào đó (đương nhiên đường đó đã có điểm kết thúc và điểm đó cũng chính là điểm start của arcTo()).

Cú pháp: context.arcTo(x1, y1, x2, y2, r);

Trong đó:

  • x1: vị trí x của điểm điều khiển
  • y1 : vị trí y của điểm điểu khiển
  • x2: vị trí x của điểm kết thúc
  • y2: vị trí y của điểm kết thúc
  • r : bán kính của vòng cung (radius).

Hình minh họa:

img canvas arcto png

Ví dụ: XEM DEMO

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();

// Vẽ 1 đường thẳng
ctx.moveTo(20, 20);         
ctx.lineTo(100, 20);

// Nôi tiếp là một đường cung
ctx.arcTo(150, 20, 150, 70, 50); 

// Tiếp theo là một đường thẳng
ctx.lineTo(150, 120);         
ctx.stroke();  <br><br><br><br><br><br><br><br><br><br><br><br><br>

4. Lời kết

Trong bài này chúng ta đã học một số cách nối các đường với nhau để tạo thành một đường dài đa dạng, kết hợp các cách này bạn sẽ tạo ra những hình vẽ cực kì ấn tượng đấy. Tuy nhiên khi làm việc với Canvas thật sự rất khó khăn bởi khâu tính tọa độ rất dài dòng và phức tạp.

Bài tiếp theo chúng ta sẽ tìm hiểu cách vẽ một số hình đặc biệt với tên gọi là Shapes. Ví dụ hình tròn, hình chữ nhật, hình bán nguyệt.

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