Áp dụng toán học trong canvas

Trần Đức Lĩnh

Những công thức toán học liên quan đến canvas được tớ tổng hợp lại trong bài này, không thể gộp chung mục canvas và lý giải những công thức toán liên quan chung một bài được.

Mục lục

1) Đường tròn.

Đường tròn được áp dụng phổ biến trong canvas.

arc(x,y,radius,start,end,anticlockwise).

Khi vẽ đường tròn cần phải xác định được tọa độ cần vẽ tương tự như các vector khác.

image-title

Có 6 tham số cần truyền vào bao gồm tọa độ x, y, tích cỡ hình tròn, điểm bắt đầu vẽ, điểm kết thúc và chiều vẽ cùng kim đồng hồ hoặc ngược lại.

image-title-here

  • Một vòng tròn được tính bởi công thức.

    • PI * 2.

2) Đường cong Bézier.

Đường cong Bézier là một đường cong tham số được sử dụng rất nhiều trong đồ họa máy tính. Bằng cách xác định tập hợp các điểm kiểm soát từ P(0) đến P(n) khi đó (n=1, n=2, n=...), t nằm trong khoảng từ 0.0 đến 1.0

(quadraticCurveTo) img

(bezierCurveTo) img

Có 3 loại đường cong Bézier phổ biến.

a) Đường cong Bézier tuyến tính:

  • Là một đoạn thẳng nối liền đi qua 2 điểm P(0) và P(1).

Phương trình:

B(t) = (1 - t)P0 + tP1;

b) Đường cong Bézier toàn phương:

  • Nối lại bởi 3 điểm P(0), P(1) và P(2).

Phương trình:

B(t) = (1-t)2P0 + 2(1 - t)tP1 + t2P2;

Hãy để ý, đường cong này xuất phát từ P(0) đến P(1) và từ P(1) đến P(2). Khi đó công thức tính sẽ được rút ra theo công thức tính đạo hàm.

Phương trình:

B'(t) = 2(1-t)(P1 - P0) + 2t(P2 - P1)

c) Đường cong Bézier lập phương:

  • Được nối lại bởi 4 điểm P(0), P(1), P(2), P(3) trên một không gian 2 chiều. Khi đó đường cong bắt đầu từ P(0), đi theo hướng P(1) và P(2) trước khi kết thúc tại P(3). Đường cong này không trực tiếp đi qua P(1) và P(2), khi đó 2 điểm này chỉ định hướng cho đường cong đi đến P(3).

Phương trình:

B(t) = (1-t)3P0 + 3(1-t)2tP1 + 3(1-t)t2P2 + t3P3

d) Đường cong Bézier cao hơn lập phương (hơn 3 điểm):

Cập nhật...


Bài tập áp dụng:

Đường Bézier lập phương có 4 điểm P(0)[1,4], P(1)[2,1], P(2)[5,3], P(3)[9,2] khi đó t = 0.4.

Áp dụng công thức ta có: B(t) = (1-t)3P0 + 3(1-t)2tP1 + 3(1-t)t2P2 + t3P3

B(t) = (1-t)3P0 + 3(1-t)2tP1 + 3(1-t)t2P2 + t3P3 B(t) = (1-0.4)^3 + 3x(1-0.4)^2x0.4 + 3x(1-0.4)x0.4^2 + 0.4^3

Khi đó:

  • P(0) : 0.216.
  • P(1) : 0.432.
  • P(2) : 0.288.
  • P(3) : 0.064.

Ta cộng P(0) + P(1) + P(2) + P(3) = 1.

img