Đường cong SVG Canvas

Mô hình

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 50, 50, 0, Math.PI);
ctx.stroke();

Thử ngay lập tức

Phương pháp arc()

Đoạn cong là một phần của hình tròn, cũng được định nghĩa bởi tọa độ tâm và bán kính:

Vẽ đoạn cong Canvas

Hãy sử dụng đường dẫn trong canvas để vẽ đoạn cong:

Để vẽ hình tròn trên canvas, hãy sử dụng các phương pháp sau:

• beginPath() - Bắt đầu đường dẫn
• arc(x,y,r,start,end) - Định nghĩa hình tròn
• stroke() - Vẽ

arc(x,y,r,start,end) - Tạo đoạn cong (đường cong).

Để tạo hình tròn, hãy đặt góc bắt đầu là 0 và góc kết thúc là 2 * Math.PI.

tham số x và y định nghĩa tọa độ tâm hình tròn.

r tham số định nghĩa bán kính của hình tròn.

Xin xem thêm:

Hướng dẫn tham khảo hoàn chỉnh Canvas của CodeW3C.com