Hình Chữ Nhật và Hình Tròn

Linh Nguyễn

Ở các bài học trước bạn đã được tìm hiểu cách vẽ đường kẻ, đường tròn và cung tròn. Trong bài học này bạn sẽ được làm quen với cách vẽ các hình.

Vẽ Hình Chữ Nhật

Thuộc tính rect() trong đối tượng context để vẽ hình chữ nhật. Ngoài ra thuộc tính strokeStyle được dùng để thiết lập màu đường viền cho hình chữ nhật sau khi vẽ (giá trị mặc định của thuộc tính này là #fff).

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

context.beginPath();
context.rect(188, 50, 200, 100);
context.strokeStyle = "#000";
context.stroke();

Bạn cũng có thể sử dụng 2 thuộc tính fillStylelineWidth để tô màu nền và quy định độ dày của đường viền.

context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = "#fafafa";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#000";
context.stroke();

Vẽ Hình Tròn

Để vẽ hình tròn chúng ta vẽ đường tròn rồi sau đó tô màu nền cho đường tròn sử dụng thuộc tính fillStyle.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#fafafa";
context.fill();
context.stroke();

Tương tự bạn cũng có thể tô đường viền và quy định độ dày cho đường viền thông qua 2 thuộc tính strokeStylelineWidth.

context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#fafafa";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#000";
context.stroke();

Thêm Phản Hồi

Câu Hỏi Liên Quan

Hướng Dẫn Liên Quan