สำหรับการสร้างเส้นแบบ 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();
ผลลัพธ์ที่ได้คือ
อ้างอิง : ที่นี่
0 comments:
Post a Comment