การวาดเส้นแบบ Path ใน Canvas (HTML5)

การวาดเส้นแบบ Path
สำหรับการสร้างเส้นแบบ path ด้วย HTML5 Canvas เราจะใช้วิธีการเชื่อมเส้นหลายเส้นเข้าด้วยกันโดยที่จุดสิ้นสุดของแต่ละส้นจะกลายเป็นจุดเริ่มต้นของเส้นต่อไปเรื่อยๆ เราใช้เมธอด lineTo(), arcTo(), quadraticCurveTo() และ bezierCurveTo() เพื่อที่จะสร้างเส้น path และใช้เมธอด beginPath() ทุกครั้งเมื่อต้องการที่จะเริ่มสร้าง path ใหม่.

ตัวอย่าง : แทคที่ใช้

ตัวอย่าง : การวาดเส้นแบบ Path

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();  // ประกาศการสร้างเส้น
      context.moveTo(100, 20); // จุดเริ่มต้นการสร้าง

      // line 1
      context.lineTo(200, 160); // จุดสิ้นสุดเส้นที่ 1

      // quadratic curve
      context.quadraticCurveTo(230, 200, 250, 120); // สร้างเส้นแบบ quadratic curve

      // bezier curve
      context.bezierCurveTo(290, -40, 300, 200, 400, 150); // สร้างเส้นแบบ bezier curve

      // line 2
      context.lineTo(500, 90); // จุดสิ้นสุดเส้นที่ 2

      context.lineWidth = 5;   // ความหนาเส้น
      context.strokeStyle = 'blue'; // สีเส้น
      context.stroke();

ผลลัพธ์ที่ได้คือ

การเชื่อมเส้น 
เพื่อที่จะเชื่อมเส้นตรใน  HTML5 Canvas นั้นเราจะใช้ lineJoin เป็นตัวกำหนดรูปแบบการเชื่อมโดยจะต้องเป็นรูปแบบหนึ่งในสามแบบดังต่อไปนี้  miter, round หรือ bevel หากไม่มีการระบุไว้จะมีค่าทั่วไปเป็น  miter .

ตัวอย่าง : การเชื่อมเส้น 

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // set line width for all lines
      context.lineWidth = 25;

      // miter line join (left)
      context.beginPath();
      context.moveTo(99, 150);
      context.lineTo(149, 50);
      context.lineTo(199, 150);
      context.lineJoin = 'miter'; // รูปแบบ miter
      context.stroke();

      // round line join (middle)
      context.beginPath();
      context.moveTo(239, 150);
      context.lineTo(289, 50);
      context.lineTo(339, 150);
      context.lineJoin = 'round'; // รูปแบบ round
      context.stroke();

      // bevel line join (right)
      context.beginPath();
      context.moveTo(379, 150);
      context.lineTo(429, 50);
      context.lineTo(479, 150);
      context.lineJoin = 'bevel'; // รูปแบบ bevel
      context.stroke();

ผลลัพธ์ที่ได้คือ 

การตัดมุม
ในการตัดมุมของเส้นที่มาตัดกันใน  HTML5 Canvas เราใช้เส้นโค้งมาวาดมุมครับโดยใช้เมธอด arcTo() ซึ่งจะมีการกำหนดจุดควบคุม (control point), จุดสิ้นสุด (ending point), และรัศมี.
ตัวอย่าง : การตัดมุม

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var rectWidth = 200;
      var rectHeight = 100;
      var rectX = 189;
      var rectY = 50;
      var cornerRadius = 50;

      context.beginPath();
      context.moveTo(rectX, rectY);
      context.lineTo(rectX + rectWidth - cornerRadius, rectY);
      context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
      context.lineTo(rectX + rectWidth, rectY + rectHeight);
      context.lineWidth = 5;
      context.stroke();

ผลลัพธ์ที่ได้คือ 

อ้างอิง : ที่นี่

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.