HTML5 12 – Vẽ đường cong Bezier bậc 3 trong Canvas

0
84

Bài số 12 chúng ta tiếp tục đi tìm hiểu cách vẽ đường cong Bezier bậc 3 trong Canvas nhé.

Định nghĩa

Phương thức bezierCurveTo() thêm một điểm vào nét vẽ hiện tại bằng cách sử dụng điểm kiểm soát trong đường cong Bézier bậc 3.

Một đường cong Bézier yêu cầu 3 điểm. Hai điểm đầu tiên là 2 điểm kiểm soát được sử dụng để tính Bézier bậc 3 và điểm cuối cùng là điểm kết thúc đường cong. Điểm bắt đầu của đường cong là điểm cuối cùng trong nét vẽ hiện tại. Nếu chưa có nét vẽ, sử dụng phương thức beginPath() và moveTo() để quy định điểm bắt đầu.

img_beziercurve
  • Điểm bắt đầu : moveTo(20,20)
  • Điểm kiểm soát 1 : bezierCurveTo(20,100,200,100,200,20)
  • Điểm kiểm soát 2 : bezierCurveTo(20,100,200,100,200,20)
  • Điểm kết thúc : bezierCurveTo(20,100,200,100,200,20)

Cú pháp JavaScript

Giá trị tham số

Tham sốMiêu tả
cp1xTọa độ X của điểm kiểm soát Bézier đầu tiên
cp1yTọa độ Y của điểm kiểm soát Bézier đầu tiên
cp2xTọa độ X của điểm kiểm soát Bézier thứ 2
cp2yTọa độ Y của điểm kiểm soát Bézier thứ 2
xTọa độ X của điểm kết thúc
yTọa độ Y của điểm kết thúc

Ví dụ

Giải thích:

  • Điểm bắt đầu là (20, 20) trong hàm context.moveTo(20, 20).
  • Điểm điều khiển 1 là (20, 100) trong hàm context.quadraticCurveTo(20, 100, 200, 100, 200, 20).
  • Điểm điều khiển 2 là (200, 100) trong hàm context.quadraticCurveTo(20, 100, 200, 100, 200, 20).
  • Điểm kết thúc là (200, 20) trong hàm  context.quadraticCurveTo(20, 100, 200, 100, 200, 20).

Kết luận

Bắt đầu cảm thấy khó khi làm việc với Canvas rồi đấy. Thực sự để vẽ được các hình ảnh tốt thì bạn phải tính toán từng Pixel chuẩn, chưa tính đến việc phải sử dụng kiến thức toán học để xác định tọa độ. Bài tiếp theo chúng ta sẽ tìm hiểu cách vẽ một đoạn thẳng bằng cách sử dụng các hàm đã học trong bài này và các bài trước.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây