Để vẽ đường cong Bezier, sử dụng phương thức bezierCurveTo() trong HTML. Trước tiên, xem cú pháp:
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
Trong đó:
- cp1x − Hoành độ của điểm điều khiển Bezier thứ nhất
- cp1y − Tung độ của điểm điều khiển Bezier thứ nhất
- cp2x − Hoành độ của điểm điều khiển Bezier thứ hai
- cp2y − Tung độ của điểm điều khiển Bezier thứ hai
- x − Hoành độ của điểm kết thúc
- y − Tung độ của điểm kết thúc
Ví dụ sau minh họa:
Ví dụ
<!DOCTYPE html> <html> <head> <title>Thẻ Canvas HTML5</title> </head> <body> <canvas id = "newCanvas" width = "550" height = "300" style = "border: 2px solid blue;"></canvas> <script> var c = document.getElementById('newCanvas'); var ctx = c.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 20); ctx.bezierCurveTo(100, 150, 200, 100, 200, 50); ctx.stroke(); </script> </body> </html>Kết quả
