Để vẽ một đường cong Quadratic trong HTML5 Canvas chúng ta có thể sử dụng phương thức quadraticCurveTo(). Đường cong được xác định bởi một điểm điều khiển và một điểm kết thúc.

Cú pháp:

1

context.quadraticCurveTo(controlX, controlY, endX, endY);

<canvas id="myCanvas" width="578" height="200"></canvas>      Tiếp theo là vẽ đường cong vào thẻ canvas trên:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.moveTo(188, 150);
 
    var controlX = 288;
    var controlY = 0;
    var endX = 388;
    var endY = 150;
 
    context.quadraticCurveTo(controlX, controlY, endX, endY);
    context.lineWidth = 10;
    context.strokeStyle = "black"; // màu đường cong
    context.stroke();
};

Giải thích: Đầu tiên một điểm điều khiển được định nghĩa, làm trọng tâm cho đường cong bằng cách tạo ra hai đường tiếp tuyến  bằng cách nối điểm này với điểm kết thúc và điểm bối cảnh được xác định theo phương pháp moveTo(). Nếu điểm kiểm soát và điểm kết thúc gần nhau hơn sẽ tạo ra đường cong lớn hơn.

* Điểm bối cảnh được xác định dựa vào điểm điểu khiển và điểm kết thúc.

Kết quả: