Đường Tròn và Cung Tròn

Hoàng Tùng

Trong hình học, một đường tròn là tập hợp các điểm cách đều một điểm cho trước một khoảng không đổi. Khoảng không đổi này được gọi là bán kính và điểm cho trước gọi là tâm đường tròn.

Cung tròn (hay hình vòng cung) là một phần của đường tròn được xác định bởi góc bắt đầu và góc kết thúc.

Đường tròn và cung tròn

Phương thức arc() của đối tượng context được dùng để vẽ đường tròn (và cung tròn) có cú pháp như sau:

arc(x, y, radius, startAngle, endAngle, anticlockwise);

Trong đó:

  • Tham số xy dùng để xác định toạ độ của tâm đường tròn và toạ độ này được xác định bắt đầu từ góc trái trên cùng của hình canvas.
  • Tham số r dùng để xác định độ dài bán kính.
  • Tham số startAngle dùng để xác định góc bắt đầu để vẽ của đường tròn (hay cung tròn)
  • Tham số endAngle dùng để xác định góc kết thúc đường tròn (hay cung tròn)
  • Tham số anticlockwise nhận giá trị là true hoặc false dùng để xác định hướng vẽ là cùng chiều kim đồng hồ hay ngược chiều.

Vẽ Đường Tròn

Khi vẽ đườn tròn thì hai tham số cuối startAngleendAngle luôn nhận giá trị là 02 * Math.PI (360 độ). Ngoài ra tham số anticlockwise có thể bỏ qua.

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

var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 0;
var endAngle = 2 * Math.PI.

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle);
context.stroke();

Vẽ Cung Tròn

Để vẽ đường vòm cung chúng ta sử dụng phương thức arc() trong đối tượng context giống như trường hợp trên nhưng thay đổi giá trị cho 2 tham số startAngleendAngle.

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

var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;

var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;

// line color
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