ความคิดเห็น: เราสามารถใช้ "พา ธ " เพื่อวาดกราฟิกใด ๆ เส้นทางเป็นเพียงชุดของจุดและเส้นที่เชื่อมต่อจุดเหล่านี้ บริบทของผืนผ้าใบใด ๆ จะมี "เส้นทางปัจจุบัน" เดียวเท่านั้นและเมื่อมีการเรียกบริบท
ต้นฉบับ:? p = 371
บทความนี้แปลจาก Steve Fulton & Jeff Fulton HTML5 Canvas, บทที่ 2, การใช้เส้นทางเพื่อสร้างสาย
สำหรับผืนผ้าใบ HTML5 เราสามารถใช้เส้นทางเพื่อวาดกราฟใด ๆ เส้นทางเป็นเพียงชุดของจุดและเส้นที่เชื่อมต่อจุดเหล่านี้ บริบทของผืนผ้าใบใด ๆ จะมีเส้นทางปัจจุบันเพียงเส้นทางเดียวและเมื่อมีการเรียกบริบท () เส้นทางปัจจุบันเส้นทางปัจจุบันจะไม่ถูกบันทึก
จุดเริ่มต้นและจุดสิ้นสุดของเส้นทาง
การโทรเริ่มต้น () สามารถเริ่มต้นเส้นทางได้ในขณะที่การเรียก closepath () จะสิ้นสุดเส้นทาง หากคุณเชื่อมต่อจุดในเส้นทางการเชื่อมต่อนี้จะเป็น SubPath หากจุดสุดท้ายใน SubPath เชื่อมต่อกับจุดแรกเราจะพิจารณาว่า SubPath ถูกปิด
การวาดเส้น
การดำเนินการพา ธ พื้นฐานที่สุดประกอบด้วยคำสั่งการเรียกซ้ำไปยัง moveto () และ lineto () คำสั่ง ตัวอย่างเช่นตัวอย่างต่อไปนี้:
ฟังก์ชั่น DrawScreen () {
Context.strokestyle = "Black";
Context.lineWidth = 10;
context.linecap = 'square';
Context.BeginPath ();
Context.moveto (20, 0);
Context.lineto (100, 0);
Context.stroke ();
บริบท closepath ();
-
ในตัวอย่างด้านบนเราแสดงส่วนเส้นแนวนอนที่มีความกว้าง 10 พิกเซล ในเวลาเดียวกันเรายังตั้งค่าคุณสมบัติ linecap และ strokestyle นี่คือรายการของคุณสมบัติที่ใช้กันทั่วไป:
linecap
LineCap กำหนดสไตล์ที่ปลายทั้งสองของส่วนบรรทัดในผืนผ้าใบและสามารถตั้งค่าเป็นหนึ่งในสามค่าต่อไปนี้:
ก้น. ค่าเริ่มต้น; เพิ่มขอบตรงที่ปลายทั้งสองของส่วนบรรทัด
กลม. เพิ่มฝาครอบเส้นครึ่งวงกลมที่ปลายแต่ละส่วนของส่วนบรรทัด เส้นผ่านศูนย์กลางของฝาครอบเส้นเท่ากับความกว้างของส่วนของเส้น
สี่เหลี่ยม. เพิ่มฝาครอบสแควร์ไลน์ไปที่ปลายทั้งสองของส่วนบรรทัด ความยาวของฝาครอบเส้นเท่ากับความกว้างของส่วนของเส้น
linejoin
LineJoin กำหนดรูปแบบมุมที่สี่แยกสองส่วน ต่อไปนี้เป็นสามค่าทางเลือก:
ตุ้มปี่ ค่าเริ่มต้น; สร้างมุมที่คมชัด คุณสามารถ จำกัด ความยาวของมุมที่คมชัดโดยการตั้งค่าคุณสมบัติ miterlimit - ค่าใช้จ่ายคืออัตราส่วนสูงสุดของความยาวมุมที่คมชัดและความกว้างของเส้นและค่าเริ่มต้นคือ 10
เอียง. สร้างมุมเอียง
กลม. สร้างมุมโค้งมน
linewidth
LineWidth กำหนดความหนาของเส้นและค่าเริ่มต้นคือ 1.0
สไตล์
Strokestyle กำหนดสไตล์เช่นสีที่ใช้ในการแสดงผล
หมายเหตุของนักแปล: เมื่อ LineJoin ถูกตั้งค่าเป็น MITER แต่ความยาวมุมที่คมชัดเกินขีด จำกัด ของ miterLimit ผ้าใบจะแสดงเอฟเฟกต์มุมเอียง