Thẻ <canvas> HTML5 dùng để vẽ đồ họa, hoạt ảnh bằng JavaScript. Phương thức getContext('2d') cung cấp ngữ cảnh vẽ 2D.
Để vẽ đường cong Bézier bậc ba, dùng phương thức bezierCurveTo(). Phương thức này thêm điểm cuối vào đường dẫn hiện tại, nối với điểm trước bằng đường cong Bézier bậc ba với hai điểm kiểm soát.
Ví dụ
Mã sau vẽ một hình dạng phức tạp bằng nhiều đoạn cong Bézier bậc ba. Tham số: x, y là điểm cuối, cp1x, cp1y là điểm kiểm soát 1, cp2x, cp2y là điểm kiểm soát 2.
<!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>
Mẹo: Kết hợp nhiều bezierCurveTo để tạo hình dạng mượt mà, phức tạp như logo, chữ viết tay, v.v.