Đường cong Canvas HTML
Đường cong Canvas HTML
Ba phương pháp được sử dụng nhiều nhất để vẽ đường cong trong canvas là:
- Phương thức
arc()
(được mô tả trong chương Vòng tròn Canvas ) - Phương thức
quadraticCurveTo()
- Phương thức
bezierCurveTo()
Phương thức bậc haiCurveTo()
Phương thức quadraticCurveTo()
được sử dụng để xác định đường cong Bezier bậc hai.
Phương thức quadraticCurveTo()
có các tham số sau:
Parameter | Description |
---|---|
cpx | Required. The x-coordinate of the control point |
cpy | Required. The y-coordinate of the control point |
x | Required. The x-coordinate of the end point |
y | Required. The y-coordinate of the end point |
Phương thức quadraticCurveTo()
yêu cầu hai điểm: Một điểm kiểm soát và một điểm cuối. Điểm bắt đầu là điểm mới nhất trong đường dẫn hiện tại, có thể thay đổi bằng cách sử dụng moveTo()
trước khi tạo đường cong Bezier bậc hai.
Để vẽ đường cong trên khung vẽ, hãy sử dụng các phương pháp sau:
-
beginPath()
- Bắt đầu một con đường -
moveTo()
- Xác định vị trí bắt đầu -
quadraticCurveTo()
- Xác định đường cong Bezier bậc hai -
stroke()
- Vẽ nó
Ví dụ
Đường cong Bezier bậc hai này bắt đầu tại điểm được chỉ định bởi moveTo(): (10, 100). Điểm kiểm soát được đặt ở (250, 170). Đường cong kết thúc tại (230, 20):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.quadraticCurveTo(250, 170,
230, 20);
ctx.stroke();
</script>
Hãy tự mình thử » Phương thức bezierCurveTo()
Phương thức bezierCurveTo()
được sử dụng để xác định đường cong Bezier bậc ba.
Phương thức bezierCurveTo()
có các tham số sau:
Parameter | Description |
---|---|
cp1x | Required. The x-coordinate of the first control point |
cp1y | Required. The y-coordinate of the first control point |
cp2x | Required. The x-coordinate of the second control point |
cp2y | Required. The y-coordinate of the second control point |
x | Required. The x-coordinate of the end point |
y | Required. The y-coordinate of the end point |
Phương thức bezierCurveTo()
yêu cầu ba điểm: Hai điểm kiểm soát và một điểm cuối. Điểm bắt đầu là điểm mới nhất trong đường dẫn hiện tại, có thể thay đổi bằng cách sử dụng moveTo()
trước khi tạo đường cong Bezier bậc ba.
Để vẽ đường cong trên khung vẽ, hãy sử dụng các phương pháp sau:
-
beginPath()
- Bắt đầu một con đường -
moveTo()
- Xác định vị trí bắt đầu -
bezierCurveTo()
- Xác định đường cong Bezier bậc ba -
stroke()
- Vẽ nó
Ví dụ
Đường cong Bezier bậc ba này bắt đầu tại điểm được chỉ định bởi moveTo(): (20, 20). Điểm kiểm soát đầu tiên được đặt tại (110, 150). Điểm kiểm soát thứ hai được đặt tại (180, 10). Đường cong kết thúc tại (210, 140):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(110, 150, 180,
10, 210, 140);
ctx.stroke();
</script>
Hãy tự mình thử »