HTML5 10 – Vẽ đường cong trong Canvas

0
331

Ngoài vẽ đường thẳng ra thì Canvas còn có thể vẽ các đường cong như hình cung, đường cong bậc hai, đường cong Benzier. Đối với cách vẽ đường thẳng thì ta chỉ cần xác định hai điểm đầu và cuối nhưng với đường cong thì có khá nhiều vấn đề phải tính toán trước khi vẽ đấy. Và bài hôm nay chúng ta sẽ đi tìm hiểu cách vẽ đường cong với Canvas trong HTML5 nhé!

Vẽ cung tròn – hình tròn với arc trong Canvas

Hàm vẽ cung tròn, hình tròn: arc(x,y,r,start,stop, counter)

  • x, y : tọa độ tâm
  • r : bán kính
  • start : góc bắt đầu vẽ
  • stop : góc kết thúc vẽ
  • counter: hướng vẽ (cùng/ngược chiều kim đồng hồ)

Ví dụ 1

Vẽ cung tròn từ 0 đến 2 * Math.PI tương ứng với chu vi hình tròn.

Ví dụ 2

Vẽ cung tròn

Vẽ đường cong bậc hai trong Canvas

Để vẽ đường cong bậc hai trong Canvas thì ta sử dụng phương thức quadraticCurveTo(), đường cong bậc hai được xác định bởi ba điểm chính gồm:

  • Điểm bắt đầu (context point).
  • Điểm điều khiển (control point).
  • Điểm kết thúc (end point).

Ví dụ:

Giải thích trong code như sau:

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

Vị trí đỉnh của đường cong được xác định bởi đường thẳng nối trung điểm giữa hai đoạn thẳng (context point, control point) và (end point, control point).

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 độ.

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