home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีวาดเส้นโค้งเบเซียร์ (Bezier Curve) บน HTML5 Canvas

บทนำ

เมธอด bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ใช้วาดเส้นโค้งเบเซียร์แบบคูบิก (Cubic Bezier Curve) ซึ่งมีจุดควบคุม 2 จุด ทำให้ควบคุมรูปทรงโค้งได้ละเอียดกว่า Quadratic Curve

พารามิเตอร์:

  • cp1x, cp1y = จุดควบคุมที่ 1
  • cp2x, cp2y = จุดควบคุมที่ 2
  • x, y = จุดปลายทาง

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas Bezier Curve</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>

ผลลัพธ์

จะได้รูปทรงที่คล้ายหัวใจหรือรูปทรงออร์แกนิกที่สมูทและซับซ้อนกว่า Quadratic Curve