ฟังก์ชั่นของ beginningPath นั้นง่ายมาก นั่นคือการเริ่มต้นเส้นทางใหม่ แต่มันสำคัญมากในกระบวนการใช้การวาดภาพบนผืนผ้าใบ
มาดูโค้ดเล็กๆ น้อยๆ ก่อน:
var ctx=document.getElementById(canvas).getContext(2d); ctx.beginPath(); ctx.rect(150,150,100,100); .fillStyle=สีเหลือง; ctx.เติม();
รหัสของเราไม่มีข้อผิดพลาด แต่เราได้รับสี่เหลี่ยมสีเหลืองสองอันที่มีความยาวด้านละ 100px แทนที่จะเป็นสีเขียวและสีเหลืองหนึ่งอัน เหตุใดจึงเป็นเช่นนี้
ในความเป็นจริง วิธีการวาด (เติม สโตก) บนผืนผ้าใบจะวาดเส้นทางทั้งหมดหลังจาก startPath สุดท้าย ในโค้ดด้านบน สี่เหลี่ยมแรกจะถูกเติมสองครั้ง ครั้งแรกเป็นสีเขียว และครั้งที่สองเป็นสีเหลือง ดังนั้นสี่เหลี่ยมสีเหลืองสองอัน ได้รับเช่นเดียวกันสำหรับการวาดส่วนของเส้น หรือเส้นโค้งอื่นๆ หรือกราฟิก ไม่ว่าคุณจะย้ายไปที่ใด ตราบใดที่คุณไม่มี beginningPath คุณกำลังวาดเส้นทาง
หากกราฟิกที่คุณวาดไม่สอดคล้องกับสิ่งที่คุณจินตนาการ อย่าลืมตรวจสอบ beginningPath
เมื่อพูดถึง beginningPath เราต้องพูดถึง closePath จริงๆ แล้วทั้งสองไม่มีอะไรเกี่ยวข้องกัน closePath หมายถึงการปิดเส้นทาง ไม่ใช่เพียงการเชื่อมต่อจุดสิ้นสุดของเส้นทางไปยังจุดเริ่มต้น ไม่ใช่เพื่อเริ่มต้นเส้นทางใหม่
เราเพิ่ม closePath หลังจากการกรอกโค้ดด้านบนครั้งแรก และเรายังคงได้สี่เหลี่ยมสีเหลืองสองอัน
แต่ถ้าเราเพิ่ม beginningPath ในภายหลัง เราจะได้สี่เหลี่ยมสองอันที่มีสีต่างกัน
โดยสรุป อย่าพยายามเริ่มต้นเส้นทางใหม่ด้วยการปิดส่วนหนึ่งของเส้นทาง และถ้าคุณไม่ปิดเส้นทาง แม้ว่าคุณจะเริ่มต้นเส้นทางใหม่ เส้นทางก็จะไม่ถูกปิด
ภาคผนวก: ทำความเข้าใจ Beginpath และ Closepath ของ Canvasวิธีการ startPath()
var ctx = document.getElementById ( 'cvs' ) ; ctx.beginPath ( ) ; ; ctx . ย้ายไปยัง ( 100.5 , 40.5 ) ; ctx.lineTo ( 200.5 , 40.5 ) ctx. strokeStyle = '#f00' ;
0.5 คือเพื่อหลีกเลี่ยงเส้นพร่ามัว แล้วโค้ดด้านบนจะได้กราฟิกประเภทไหน? เป็นเส้นสีดำและเส้นสีแดง?
จากมุมมองของโค้ด ไม่มีปัญหากับตรรกะของเรา แต่ผลลัพธ์ก็คือเราได้เส้นสีแดงสองเส้น ไม่ใช่เส้นสีดำเส้นหนึ่งและสีแดงเส้นหนึ่ง
หากคุณเข้าใจว่าทำไมถึงเป็นเช่นนั้น คุณก็ไม่จำเป็นต้องอ่านส่วนที่เหลือ นี่คือความสำคัญของ beginningPath
วิธีการวาดในแคนวาส (เช่น เส้นขีด การเติม) จะวาดตามเส้นทางทั้งหมดหลังจาก startPath สุดท้าย ตัวอย่างเช่น ฉันขีดสองครั้งในโค้ดด้านบน อันที่จริง สองจังหวะนี้อิงตามเส้นทางทั้งหมดหลังจาก startPath แรก กล่าวคือ เราตีเส้นแรกสองครั้ง จังหวะแรกเป็นสีดำ และจังหวะที่สองเป็นสีแดง ดังนั้นในที่สุดมันก็เป็นสีแดงเช่นกัน
1. ไม่ว่าคุณจะใช้ moveTo ที่ไหนเพื่อย้ายแปรง ตราบใดที่คุณไม่ startPath คุณจะวาดเส้นทางอยู่เสมอ
2. ฟังก์ชันต่างๆ เช่น fillRect และ strokeRect ซึ่งวาดพื้นที่อิสระโดยตรง จะไม่ขัดจังหวะเส้นทางปัจจุบัน
หากกราฟิกที่คุณวาดแตกต่างจากที่คุณจินตนาการไว้ อย่าลืมตรวจสอบว่ามี beginningPath ที่สมเหตุสมผลหรือไม่
-
เมื่อพูดถึง beginningPath เราต้องพูดถึง closePath ทั้งสองมีความสัมพันธ์กันอย่างใกล้ชิดหรือไม่? คำตอบก็แทบจะไม่มีอะไรเลย
closePath ไม่ได้หมายถึงการสิ้นสุดเส้นทาง แต่เป็นการปิดเส้นทาง โดยจะพยายามเชื่อมต่อเส้นทางจากจุดสิ้นสุดของเส้นทางปัจจุบันไปยังจุดเริ่มต้นเพื่อปิดเส้นทางทั้งหมด อย่างไรก็ตาม นี่ไม่ได้หมายความว่าเส้นทางหลังจากนั้นจะเป็นเส้นทางใหม่!
เราเพิ่ม closePath หลังบรรทัดแรกถึงในโค้ดด้านบน และเราพบว่าเรายังมีเส้นสีแดงสองเส้นอยู่
แต่ถ้าเราเพิ่ม beginningPath หลังจากจังหวะแรก เราจะได้เส้นสีดำและเส้นสีแดงตามที่คาดไว้
ctx.จังหวะ ( ) ; ctx.moveTo ( 100.5 , 40.5 ) ; ctx.lineTo ( 200.5 , 40.5 ) ;
โดยสรุป อย่าพยายามเริ่มต้นเส้นทางใหม่โดยการปิดเส้นทางที่มีอยู่ เมื่อคุณเริ่มต้นเส้นทางใหม่ เส้นทางก่อนหน้าจะไม่ถูกปิด