การวาดเส้นตรงใน Canvas (HTML5)

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

หมายเหตุ : ตำแหน่งเริ่มต้นการวาด (0,0) อยู่ที่ มุมซ้ายบนของผู้อ่านครับ

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

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

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

      context.beginPath();
      context.moveTo(100, 150); // เริ่มต้น cursor (ตำแหน่งเริ่มต้นของ context)
      context.lineTo(450, 50); // ตำแหน่งปลายทาง
      context.stroke();

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

จะสังเกตุว่าหากสร้างเส้นธรรมดาเส้นจะมีขนาดเล็ก เราสามารถเพิ่มขนาดของเส้นได้โดยใช้ lineWidth ของ canvas context.

context.lineWidth = 15;

ตัวอย่าง : การเพิ่มขนาดเส้น

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

      context.beginPath();
      context.moveTo(100, 150);
      context.lineWidth = 15;   // เพิ่มขนาดเส้น
      context.lineTo(450, 50);
      context.stroke();

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

ต่อไปเป็นเรื่องของสีเส้นหากเราไม่ได้กำหนดค่าใดๆไว้ โดยทั่วไปจะเป็นสีดำ เพื่อที่จะเปลี่ยนสีของเส้นเราต้องใช้ strokeStyle ของ canvas context ครับ โดยสามารถกำหนดค่าสีได้ในรูปแบบของข้อความ เช่น  red, green, blue หรือจะใช้ในแบบค่า hex เช่น #FF0000 , #555, หรือจะเป็นในรูปแบบของค่า RGB ก็ได้เช่นเดียวกัน  rgb(255, 0, 0).

      // set line color
      context.strokeStyle = '#ff0000';

ตัวอย่าง : การใส่สีเส้น

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

      context.beginPath();
      context.moveTo(100, 150);
      context.lineWidth = 15;   
      context.strokeStyle = '#ff0000'; // ใส่สีเส้น
      context.lineTo(450, 50);
      context.stroke();

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

คุณสมบัติต่อมาเป็นเรื่องของ Cap ปลายเส้น โดยเราสามารถที่จะกำหนด cap ของเส้นได้โดยใช้ lineCap โดยมีให้เลือกอยู่สามแบบคือ butt, round, และ square หากไม่ได้ระบุไว้จะมีค่าทั่วไปเป็น butt.

     context.lineCap = 'round';

ตัวอย่าง : การเพิ่มขนาดเส้น

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

      // butt line cap (top line)
      context.beginPath();
      context.moveTo(200, canvas.height / 2 - 50);
      context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
      context.lineWidth = 20;
      context.strokeStyle = '#0000ff';
      context.lineCap = 'butt'; // กำหนด cap แบบ butt
      context.stroke();

      // round line cap (middle line)
      context.beginPath();
      context.moveTo(200, canvas.height / 2);
      context.lineTo(canvas.width - 200, canvas.height / 2);
      context.lineWidth = 20;
      context.strokeStyle = '#0000ff';
      context.lineCap = 'round'; // กำหนด cap แบบ round
      context.stroke();

      // square line cap (bottom line)
      context.beginPath();
      context.moveTo(200, canvas.height / 2 + 50);
      context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
      context.lineWidth = 20;
      context.strokeStyle = '#0000ff';
      context.lineCap = 'square'; // กำหนด cap แบบ square
      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.