Cách vẽ đường cong bậc hai (Quadratic Curve) trên HTML5 Canvas

Thẻ <canvas> của HTML5 dùng để vẽ đồ họa, hoạt ảnh bằng JavaScript. Phần tử canvas có phương thức DOM getContext để lấy ngữ cảnh vẽ và các hàm vẽ. Hàm này nhận một tham số là loại ngữ cảnh 2d.

Để vẽ đường cong bậc hai (Quadratic Bézier) trên Canvas, sử dụng phương thức quadraticCurveTo(). Phương thức này thêm điểm đã cho vào đường dẫn hiện tại, nối với điểm trước đó bằng một đường cong Bézier bậc hai với điểm kiểm soát cho trước.

Ví dụ

Mã sau minh họa cách vẽ đường cong bậc hai. Tham số x, y là tọa độ điểm cuối, cpx, cpy là tọa độ điểm kiểm soát.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas Tag</title>
  </head>
  <body>
    <canvas id="newCanvas" width="500" height="300" style="border:1px solid #000000;"></canvas>
    <script>
      var c = document.getElementById('newCanvas');
      var ctx = c.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(75,25);
      ctx.quadraticCurveTo(25,25,25,62.5);
      ctx.quadraticCurveTo(25,100,50,100);
      ctx.quadraticCurveTo(50,120,30,125);
      ctx.quadraticCurveTo(60,120,65,100);
      ctx.quadraticCurveTo(125,100,125,62.5);
      ctx.quadraticCurveTo(125,25,75,25);
      ctx.stroke();
    </script>
  </body>
</html>

Giải thích: moveTo đặt điểm bắt đầu, các lần gọi quadraticCurveTo nối tiếp tạo nên hình dạng phức tạp.