Thẻ HTML5
Để vẽ đường cong Bezier bằng canvas HTML5, hãy sử dụng phương thức bezierCurveTo (). 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 hình khối với các đ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 Bezier trên HTML5 Canvas. Các tham số x và y trong phương thức bezierCurveTo () là tọa độ của điểm cuối. cp1x và cp1y là tọa độ của điểm điều khiển đầu tiên và cp2x và cp2y là tọa độ của điểm điều khiển thứ hai.
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');
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
</script>
</body>
</html> Đầu ra
