arcTo() trong Canvas

Tạo một vòng cung giữa 2 tiếp tuyến trên canvas Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 < ! DOCTYPE html > < ...

Tạo một vòng cung giữa 2 tiếp tuyến trên canvas

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

Code:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20, 20); // Di chuyển tới điểm xuất bắt đầu

ctx.lineTo(100, 20); // Tạo một đường kẻ ngang

ctx.arcTo(150, 20, 150, 70, 50); // Tạo một vòng cung

ctx.lineTo(150, 120); // Sau đó vẽ tiếp một đường kẻ dọc

ctx.stroke(); // Thể hiện hình trên canvas

</script>

</body>

</html>

Demo

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính
arcTo()	4.0	2.0	9.0	3.1	Không

Lưu ý: Opera không hỗ trợ phương thức the arcTo().

Phương thức arcTo() tạo một vòng cung / đường cong giữa 2 tiếp tuyến trên the canvas.

Mẹo: Sử dụng phương thức stroke() để thể hiện vòng cung trên canvas.

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

Tham số	Miêu tả
x1	Tọa độ X của điểm bắt đầu đường cong
y1	Tọa độ Y của điểm bắt đầu đường cong
x2	Tọa độ X của điểm kết thúc đường cong
y2	Tọa độ Y của điểm kết thúc đường cong
r	Bán kính đường cong

Bình luận về bài viết này

Trần Trung Dũng

15 chủ đề

2610 bài viết