ในบทความเกี่ยวกับการวาดเส้นผ้าใบฉันได้พูดคุยเกี่ยวกับวิธีการวาดเส้นตรง บทความเกี่ยวกับเส้นโค้งการวาดภาพนี้ควรได้รับการเผยแพร่มานานแล้ว แต่เนื่องจากเส้นโค้งการวาดภาพผ้าใบค่อนข้างพิเศษฉันจึงยังไม่ได้คิดเลยดังนั้นฉันจึงต้องลองทีละขั้นตอน
หนึ่งในความยากลำบากในการวาดเส้นโค้งในผืนผ้าใบคือมันมี 4 ฟังก์ชั่นของเส้นโค้ง! พวกเขาคืออาร์ค, Arcto, curveto กำลังสอง, beziercurveto ให้ฉันเริ่มต้นด้วยวิธี ARC ที่ง่ายที่สุด
ฟังก์ชั่นของอาร์คคือการวาดส่วนโค้งปกติซึ่งอาจเป็นวงกลมที่สมบูรณ์หรือส่วนโค้งของวงกลม
ไวยากรณ์ของอาร์คมีดังนี้ :context.arc (x, y, รัศมี, startangle, endangle, anticlockwise)
ฉันจะอธิบายพารามิเตอร์ของเขานั่นคือ
อาร์ค (กึ่งกลาง X, กึ่งกลาง y, รัศมี, มุมเริ่มต้น, มุมสิ้นสุดหรือไม่ว่าจะเป็นทวนเข็มนาฬิกา)
เราควรทำอย่างไรถ้าเราวาดวงกลมที่สมบูรณ์ด้วยอาร์ค? ทุกคนสังเกตเห็นว่ามีมุมเริ่มต้นและมุมสิ้นสุดในพารามิเตอร์ หากมุมเริ่มต้นของเราคือ 0 และมุมสิ้นสุดคือ 360 มันไม่ใช่วงกลมที่สมบูรณ์แบบใช่ไหม
ทางออกที่ถูกต้อง! แต่ควรสังเกตว่ามุมที่นี่แสดงโดยเรเดียน (และเป็นแฟลช) วงกลมที่สมบูรณ์คือ 360 องศาซึ่งเป็นเรเดียน 2pi
ดังนั้นเราจึงเขียนสิ่งนี้ :ctx.arc (400,400,20,0, math.pi*2);
ctx.fill ();
ctx.stroke ();
เช่นเดียวกับ Lineto อาร์คยังเป็นเส้นทางที่จะวาดดังนั้นเราต้องเรียกวิธีการเติมหรือจังหวะที่อยู่ด้านหลังเพื่อแสดงรูป (strokestyle สีแดงและสไตล์การเติมสีแดงโปร่งแสงถูกใช้ในรูป)
ทีนี้มาวาดวงกลม 1/4 มุมมุมคือ 90 องศา ดังที่ได้กล่าวไว้ก่อนหน้านี้มุม 360 องศาคือเรเดียน 2pi จากนั้นมุม 10 องศาคือ 2pi/360 = เรเดียน PI/180 จากนั้น 90 องศาคือ 2pi/360*90 = เรเดียน PI/2 (โปรดคำนวณมุมอื่น ๆ ด้วยตัวคุณเอง)
ctx.arc (400,400,20,0, math.pi*2/4);
จากรูปเราสามารถกำหนดได้ว่า 0 องศาของส่วนโค้งเป็นที่ใช้กันทั่วไป 0 องศาในวิชาคณิตศาสตร์ แต่มุมถูกเปิดตามเข็มนาฬิกาตามค่าเริ่มต้นซึ่งตรงข้ามกับแบบจำลองทางคณิตศาสตร์ (เกี่ยวข้องกับพิกัดเนื่องจากพิกัดผ้าใบนั้นตรงกันข้ามกับพิกัดทางคณิตศาสตร์)
แต่ไม่มีพารามิเตอร์อยู่ด้านหน้าของมันที่กำหนดว่าเป็นทวนเข็มนาฬิกาหรือไม่? แล้วเราจะทำให้เขาเป็นจริงล่ะ?
ctx.arc (400,400,20,0, math.pi*2/4, จริง);
คุณจะเห็นว่ามุมกลายเป็นทวนเข็มนาฬิกาทำให้อาร์คกลายเป็น 360-90 = 270 องศา
แต่! สิ่งหนึ่งที่คุณควรให้ความสนใจคือวิธีการคำนวณของจุดเริ่มต้นและจุดสิ้นสุดมักจะขึ้นอยู่กับ 0 องศาและขยายตามเข็มนาฬิกาและไม่มีการบอกว่าซิสโก้และตรงกันข้ามเป็นจริง ทวนเข็มนาฬิกาเป็นเพียงทิศทางของส่วนโค้ง
สิ่งนี้ไม่เพียง แต่ป้องกันความสับสนจากการเดินทางไปมา แต่ยังทำให้การคำนวณง่ายขึ้น
อย่างไรก็ตามการใช้งานที่ยืดหยุ่นของทวนเข็มนาฬิกามีประโยชน์บางครั้ง
ในตัวอย่างด้านบนมุมเริ่มต้นของเราคือ 0 ตอนนี้ลองมาลองมุมเริ่มต้นอื่น ๆ เช่น 90 องศา
ctx.arc (400,400,20, math.pi*2/4, math.pi*2+math.pi);
หากจุดเริ่มต้นของเราคือ 90 องศาและจุดสิ้นสุดคือ 90 องศาดังนั้นผลลัพธ์ก็คือไม่มีอะไรสามารถวาดได้ดังนั้นฉันจึงเปลี่ยนมุมจุดสิ้นสุดเป็น 180 องศาและในที่สุดก็มีรูปในรูปด้านล่าง
คำถาม : ถ้าเราวาดวงกลมที่สมบูรณ์จากจุดเริ่มต้นที่ไม่ใช่ 0 ระดับก็โอเคไหม? แน่นอนว่ามันเป็นไปได้ตราบใดที่คุณกำหนดจุดสิ้นสุดของส่วนโค้งเป็น 360 องศา + มุมเริ่มต้นเช่น:ctx.arc (400,400,20, math.pi*2/4, math.pi*2+math.pi*2/4); // จุดเริ่มต้นคือ 90 องศาจุดสิ้นสุดคือ 360+90 องศา
อย่างไรก็ตามวิธีการนี้เป็นเรื่องของการค้นหาปัญหาโดยไม่มีปัญหาใด ๆ และคนปกติจะไม่ใช้มัน
สรุป : วิธีการโค้งของ Canvas คือการวาดส่วนโค้งปกติและคุณสามารถวาดส่วนโค้งปกติและคุณไม่สามารถวาดส่วนโค้งแปลก ๆ อื่น ๆ เช่นรูปตัว S-แม้ว่าฉันจะชอบรูปตัว S มากที่สุด