Thẻ HTML5
Để vẽ đường cong bậc hai bằng canvas HTML5, hãy sử dụng phương thức quadraticCurveTo (). Phương pháp này thêm điểm đã cho vào đường dẫn hiện tại, được kết nối với đường trước đó bằng đường cong Bezier bậc hai với điểm điều khiển đã cho.
Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách vẽ đường cong bậc hai trên HTML5 Canvas. Các tham số x và y trong phương thức quadraticCurveTo () là tọa độ của điểm cuối. cpx và cpy là tọa độ của điểm điều khiển.
Ví dụ
<!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');
// Draw shapes
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> Đầu ra
