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

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

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

?

1	<canvas height="200" id="myCanvas" width="578"></canvas>

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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 .

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

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), และรัศมี.
ตัวอย่าง : การตัดมุม

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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.