ความคิดเห็น: บทความนี้จะพูดคุยเกี่ยวกับวิธีการวาดรูปสี่เหลี่ยมผืนผ้าและวงกลมในผืนผ้าใบพวกเขาเป็นของกราฟิกพื้นฐาน แน่นอนว่ามีมากกว่าแค่พวกเขาในกราฟิกพื้นฐาน แต่ในผืนผ้าใบการวาดรูปสี่เหลี่ยมและวงกลมเท่านั้นไม่จำเป็นต้องใช้วิธีอื่นในการจำลอง เพื่อนที่สนใจสามารถเรียนรู้เกี่ยวกับมันได้
บทความนี้จะพูดคุยเกี่ยวกับวิธีการวาดรูปสี่เหลี่ยมผืนผ้าและวงกลมในผืนผ้าใบพวกเขาเป็นของกราฟิกพื้นฐาน แน่นอนว่ามีมากกว่าพวกเขาในกราฟิกพื้นฐาน แต่ในผืนผ้าใบการวาดรูปสี่เหลี่ยมและวงกลมไม่จำเป็นต้องมีการจำลองอื่น ๆผ้าใบวาดรูปสี่เหลี่ยมผืนผ้า
1. Fillrect and Strokerect
Fillrect สามารถเติมเต็มรูปสี่เหลี่ยมผืนผ้าโดยตรงและสไตล์การเติมคือสไตล์ที่คุณกำลังตั้งค่าอยู่ ในทำนองเดียวกัน Strokerect คือการตีสี่เหลี่ยมผืนผ้าโดยตรง
พารามิเตอร์ของพวกเขามีความสอดคล้องกัน (จุดเริ่มต้น x พิกัดจุดเริ่มต้น y, ความกว้างของสี่เหลี่ยม, ความสูงของสี่เหลี่ยม) จุดเริ่มต้นที่นี่หมายเหตุหมายถึงจุดในมุมซ้ายบนของสี่เหลี่ยม
เรามักจะใช้พวกเขาเพื่อทำสิ่งที่เรียบง่ายและพวกเขาสามารถทำสิ่งง่าย ๆ ได้ ทำไม เนื่องจากคำว่ากราฟิกที่พวกเขาวาดไม่มีเส้นทางจึงออกมาโดยตรง
ตัวอย่างเช่นหากคุณเติมสี่เหลี่ยมด้วย Fillrect เป็นครั้งแรกคุณต้องการตีสี่เหลี่ยม หากคุณใช้ stroke () จะไม่มีผลเพราะแม้ว่าจะมีสี่เหลี่ยมในเวลานี้ แต่ก็ไม่มีเส้นทาง
หากคุณกระตือรือร้นที่จะจังหวะสี่เหลี่ยมผืนผ้านี้คุณสามารถใช้ Strokerect () เพื่อจังหวะสี่เหลี่ยมผืนผ้าที่ตำแหน่งเดียวกัน - แต่จริง ๆ แล้วเป็นอิสระเพียงแค่ซ้อนทับตำแหน่ง
CTX.Fillrect (200,100,50,40);
CTX.Strokerect (200,100,50,40);
หากเราต้องการสี่เหลี่ยมที่เต็มไปและลูบมันจะยุ่งยากอย่างไม่ต้องสงสัยที่จะใช้ Fillrect และ Strokerect ในเวลาเดียวกัน ดังนั้นในกรณีนี้เรามักจะใช้วิธีการต่อไปนี้
2, rect
พารามิเตอร์ของ rect ไม่แตกต่างจาก Fillrect และ Strokerect ความแตกต่างคือพวกเขาวาดเส้นทางเท่านั้นและคุณต้องทำให้จังหวะหรือเติมเต็มในภายหลัง
CTX.RECT (300,100,50,40);
ctx.stroke ()
ctx.fill ();
ประโยชน์ของการทำสิ่งนี้คืออะไร? ในบทความก่อนหน้านี้ฉันได้กล่าวถึงการเติมหรือการใช้ทรัพยากรจำนวนมากดังนั้นเราจึงมักจะต้องวาดเส้นทางหลายร้อยเส้นทางในครั้งเดียวจากนั้นจังหวะหรือเติม ในเวลานี้ใช้ rect เพื่อวาดเส้นทางแล้วเติมอีกครั้งซึ่งหลีกเลี่ยงปัญหาของการเติมและการเติมเต็มหรือสโตเกอร์คทุกครั้ง
3. lineto
แน่นอนคุณยังสามารถใช้ Linesto 4 รูปสี่เหลี่ยมผืนผ้าเช่นการสอนการวาดเส้นของฉัน แต่นี่ไม่จำเป็นโปรดตรวจสอบรายละเอียดบทความนั้น
ผ้าใบวาดวงกลม
ท้องฟ้าไม่มีตา ในความเป็นจริงผ้าใบไม่มีฟังก์ชั่นจริงที่สามารถวาดวงกลมได้โดยตรง สิ่งที่เขาวาดคือส่วนโค้ง 360 องศาซึ่งดูเหมือนวงกลม
เราได้กล่าวถึงฟังก์ชั่นของผืนผ้าใบเพื่อวาดส่วนโค้งมาก่อนนั่นคือส่วนโค้ง เราใช้มันเพื่อวาดวงกลม:
ctx.arc (300+25,100+20,20,0, math.pi*2);
ctx.stroke ()
ctx.fill ();
ส่วนโค้งนี้เหมือนกับ rect และเส้นทางที่ถูกดึงและการเติมหรือจังหวะจะต้องเสร็จสิ้นในภายหลัง
แต่ควรสังเกตว่าการตัดสินตำแหน่งของวงกลมนั้นแตกต่างจากรูปสี่เหลี่ยมผืนผ้า เรากำหนดตำแหน่งของมันด้วยมุมซ้ายบนของสี่เหลี่ยมเป็นจุดเริ่มต้น แต่เรามักจะกำหนดตำแหน่งของวงกลมที่มีศูนย์กลางของวงกลม
หากคุณต้องการวาดชุดสี่เหลี่ยมและวงกลมที่อยู่ตรงกลางในแนวนอนและแนวตั้งคุณต้องจำไว้ว่าอย่าคำนึงถึงจุดเริ่มต้นของสี่เหลี่ยมเป็นจุดเริ่มต้นของวงกลม - จุดเริ่มต้นของวงกลมคือศูนย์กลางของวงกลม!
ลืมไปเลยฉันจะให้สูตรแก่คุณตอนนี้วงกลมและรูปสี่เหลี่ยมผืนผ้าที่จัดตำแหน่งพิกัดของศูนย์กลางของวงกลม = พิกัดของสี่เหลี่ยม + ครึ่งหนึ่งของความกว้างและความสูงของรูปสี่เหลี่ยมผืนผ้า
นั่นคือศูนย์กลางของวงกลม x = สี่เหลี่ยมผืนผ้า x + ความกว้างสี่เหลี่ยม/2 และวงกลม y = สี่เหลี่ยมผืนผ้า y + ความสูงสี่เหลี่ยมผืนผ้า/2 ด้วยวิธีนี้พวกเขาได้รับการจัดตำแหน่งอย่างแน่นอน
แม้ว่าอาร์คจะไม่ง่ายต่อการใช้เป็นวิธีการวาดวงกลมโดยตรง - วิธีการวาดวงกลมโดยตรงที่ฉันคิดว่าต้องใช้เพียง 3 พารามิเตอร์คือพิกัดกลางนั่นคือรัศมี - แต่อาร์คไม่เพียง แต่วาดวงกลม แต่ยังวาดครึ่งวงกลม
เนื่องจากมีวงกลมควรมีวงรี แต่ไม่มีฟังก์ชั่นปกติในการวาดวงกลมในผืนผ้าใบ ดังนั้นการวาดรูปไข่จะต้องจำลองโดยใช้วิธีอื่น สิ่งนี้ค่อนข้างซับซ้อนดังนั้นฉันจะปล่อยให้มันไปยังขั้นตอนต่อไป