แท็ก HTML5
ในการวาดเส้นโค้งเบซิเยร์ด้วยผ้าใบ HTML5 ให้ใช้เมธอด bezierCurveTo() วิธีการเพิ่มจุดที่กำหนดให้กับเส้นทางปัจจุบัน เชื่อมต่อกับจุดก่อนหน้าด้วยเส้นโค้งลูกบาศก์ Bezier ด้วยจุดควบคุมที่กำหนด
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีวาดเส้นโค้ง Bezier บน HTML5 Canvas พารามิเตอร์ x และ y ในเมธอด bezierCurveTo() คือพิกัดของจุดปลาย cp1x และ cp1y คือพิกัดของจุดควบคุมจุดแรก และ cp2x และ cp2y คือพิกัดของจุดควบคุมที่สอง
ตัวอย่าง
<!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> ผลลัพธ์
