วาดเส้นโค้ง Bezier ด้วย HTML5 Canvas

ใช่, ใช้เมธอด bezierCurveTo() ของ HTML canvas เพื่อวาดเส้นโค้ง Bezier ใน HTML5

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อวาด Bezier curve:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #test { width: 100px; height: 100px; margin: 0px auto; }
    </style>
    <script>
      function drawShape() {
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
          var ctx = canvas.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();
        } else {
          alert('You need Safari or Firefox 1.5+ to see this demo.');
        }
      }
    </script>
  </head>
  <body id="test" onload="drawShape();">
    <canvas id="mycanvas"></canvas>
  </body>
</html>

ผลลัพธ์