มีวิธีการวาดภาพทั่วไปสองวิธีคือเติมและจังหวะ บทความก่อนหน้านี้ได้พูดคุยเกี่ยวกับวิธีการของโรคหลอดเลือดสมองแล้ว บทความนี้จะพูดคุยเกี่ยวกับวิธีการเติมกราฟิกในผืนผ้าใบ
เติม () ตรงไปตรงมามาก? และเช่นเดียวกับ Strokestyle แสดงถึงสไตล์จังหวะการเติมเต็มรูปแบบการเติม
ctx.fillstyle = 'color'; สไตล์การเติมเริ่มต้นคือทึบแสงสีดำ
คำถาม: สามารถเติมเต็มเส้นทางได้หรือไม่?สามารถ. Canvas จะเชื่อมต่อโดยตรงกับจุดเริ่มต้นจากจุดสิ้นสุดของเส้นทางปัจจุบันของคุณจากนั้นเติม ดังที่แสดงในภาพ:
แต่คุณสามารถพบว่าย่อหน้าสุดท้ายไม่มีจังหวะ
ฉันจำได้ว่าในบทความก่อนหน้าของเราเราดึงสี่เหลี่ยมจัตุรัสด้วย 4 บรรทัด แต่ผ้าใบไม่ได้เลวร้ายนักและไม่มีแม้แต่ฟังก์ชั่นในการวาดสี่เหลี่ยมผืนผ้าโดยตรง คุณสามารถใช้ Fillrect () เพื่อเติมลงในสี่เหลี่ยมผืนผ้าโดยตรง:
ctx.fillrect (x, y, ความกว้าง, ความสูง);
ที่นี่ x และ y อ้างถึงพิกัดของจุดเริ่มต้นของมุมซ้ายบนของสี่เหลี่ยมโปรดจำไว้ว่า
เมื่อพูดถึง Fillrect เราต้องพูดถึง Strokerect คุณเดาได้ว่าถูกต้องมันหมายถึงการตีสี่เหลี่ยมผืนผ้าโดยตรง
นอกจากนี้ยังมี Filltext และ Stroketext สำหรับฟังก์ชั่นคุณอาจเดาได้ ฉันจะไม่พูดถึงที่นี่ดังนั้นทุกคนจะดูตัวอย่างก่อน
ผ้าใบเติมสีไล่ระดับสีในผืนผ้าใบสีการไล่ระดับสียังแบ่งออกเป็นสองประเภทคือการไล่ระดับสีเชิงเส้นและการไล่ระดับสีรัศมีและวิธีการสร้างมันก็เป็นอิสระเช่นกัน ก่อนอื่นลองดูวิธีการสร้างการไล่ระดับสีเชิงเส้น
สร้างการไล่ระดับสีเชิงเส้น = createLineargradient - ดูยังคงเป็นคำที่ตรงมาก ไวยากรณ์ของเขามีดังนี้:
CreateLinearGradient (X1, Y1, X2, Y2) มี 4 พารามิเตอร์! มันดูซับซ้อนมาก แต่ในความเป็นจริงมันค่อนข้างง่ายเพราะเราได้กล่าวไปแล้วว่าจุดหนึ่งในโลกเครื่องบินถูกกำหนดโดยพิกัด X และพิกัด Y ดังนั้น X1, Y1 แสดงถึงพิกัดจุดเริ่มต้นของการไล่ระดับสีเชิงเส้นและ X2, Y2 แสดงถึงพิกัดจุดสิ้นสุด
ประโยชน์ของการทำสิ่งนี้ชัดเจนและสะดวกถ้าเราต้องการสร้างการไล่ระดับสีเชิงเส้นเอียง แต่ลองสร้างการไล่ระดับสีเชิงเส้นแนวนอนก่อน
var linear = ctx.createlineargradient (100,100,200,100); การไล่ระดับสีดูเหมือนจะถูกสร้างขึ้นดังนั้นเราจะเติมเต็มได้หรือไม่? -การไล่ระดับสีนี้ว่างเปล่าและไม่มีสี
วิธีการเพิ่มสีให้กับแถบการไล่ระดับสีคือ addColorStop (ตำแหน่งสี) แต่โปรดทราบว่า AddColorStop นี้ไม่ได้ถูกเพิ่มลงในแปรง แต่ไปยังตัวแปรที่ช่วยประหยัดการไล่ระดับสีด้านหน้า ฉันเป็นเส้นตรงที่นี่
var linear = ctx.createlineargradient (100,100,200,100);
linear.addColorStop (0, '#fff');
linear.addColorStop (0.5, '#f0f');
linear.addColorStop (1, '#333');
ฉันใช้ 3 addColorStops ที่นี่ซึ่งหมายถึงการเพิ่ม 3 สีลงในแถบการไล่ระดับสี
หมายเหตุ : พารามิเตอร์ตำแหน่งของ AddColorStop มักจะเป็นตัวเลขระหว่าง 0-1 และสามารถเป็นเลขทศนิยมสองหลักซึ่งแสดงถึงเปอร์เซ็นต์ เขาไม่สามารถรับพารามิเตอร์เช่น '3px' ได้ในเวลานี้เราสามารถเติมสีไล่ระดับสีได้ แต่ก่อนอื่นเราต้องกำหนดไล่ระดับสีที่กำหนดให้กับ Fillstyle ก่อน
var linear = ctx.createlineargradient (100,100,200,100);
linear.addColorStop (0, '#fff');
linear.addColorStop (0.5, '#f0f');
linear.addColorStop (1, '#333');
ctx.fillstyle = linear; // กำหนดไล่ระดับสีเพื่อเติมสไตล์
CTX.Fillrect (100,100,100,100);
ctx.stroke ();
โปรดทราบว่า Fillrect และ Strokerect วาดเส้นทางอิสระ ตัวอย่างเช่นในรหัสข้างต้นจังหวะจะถูกเรียกหลังจาก fillrect และสี่เหลี่ยมที่เพิ่งวาดจะไม่ถูกลูบ เช่นเดียวกับ Strokerect
หลังจากการทดสอบฉันพบปัญหาที่เจ็บปวดมากนั่นคือพิกัดของการไล่ระดับสีเชิงเส้นนั้นสัมพันธ์กับช่วงผ้าใบทั้งหมด ตัวอย่างเช่นที่นี่การไล่ระดับสีเชิงเส้นของฉันเริ่มต้นที่ 100,100 ถ้าฉันวาดสี่เหลี่ยมที่ 0,0 และเติมด้วยการไล่ระดับสีนี้ฉันจะพบว่าไม่มีการเติม - เนื่องจากช่วงของการไล่ระดับสีของฉันเกินช่วงของสี่เหลี่ยมผืนผ้า
นี่เป็นการตั้งค่าการหลอกลวงจริงๆ
คำถาม: สีจะเต็มไปก่อนจุดเริ่มต้นของการไล่ระดับสีและหลังจากจุดสิ้นสุดของการไล่ระดับสีหรือไม่? การประชุม. สีก่อนจุดเริ่มต้นคือสีจุดเริ่มต้นและสีหลังจากจุดสิ้นสุดจะเป็นสีจุดสิ้นสุดเสมอวิธียุติสีจุดสิ้นสุดคุณสามารถเติมสีที่โปร่งใสหลังจากสีสุดท้าย ชอบ:
linear.addColorStop (0.99, '#333');
linear.addColorStop (1, 'RGBA (51,51,51,0)');
ตามแผนก่อนหน้านี้ฉันจะพยายามสร้างการไล่ระดับสีเชิงเส้นที่เอียงอีกครั้ง เพียงเปลี่ยนพารามิเตอร์ของ createLineargradient
var linear = ctx.createlineargradient (100,100,200,200);
เอฟเฟกต์แสดงในภาพ:
จากนั้นลองทำเรเดียลการไล่ระดับสี (การไล่ระดับสีแบบวงกลม) เช่นเดียวกับ createLineargradient วิธีการสร้างเรเดียลไล่ระดับสีคือ: createradialgradient แต่พารามิเตอร์ของพวกเขาอาจแตกต่างกันมาก:
Createradialgradient (X1, Y1, R1, X2, Y2, R2) ซึ่ง X1, Y1, X2, Y2 ยังคงแสดงถึงจุดเริ่มต้นและจุดสิ้นสุด แต่จุดเริ่มต้นและจุดสิ้นสุดที่นี่เป็นวงกลมและ X, Y เป็นพิกัดของศูนย์กลางของวงกลม ดังนั้น R1 และ R2 จึงเป็นรัศมีของวงกลมจุดเริ่มต้นและรัศมีของวงกลมจุดสิ้นสุดตามลำดับ ดังที่แสดงในภาพ:
ในความประทับใจของฉันดูเหมือนว่าการไล่ระดับสีรัศมีเป็นวงกลมศูนย์กลางของวงกลมคือจุดเริ่มต้นและรัศมีของวงกลมคือจุดสิ้นสุด แต่การไล่ระดับสีรัศมีในผืนผ้าใบนั้นแตกต่างกันจริง ๆ จุดเริ่มต้นคือวงกลมและจุดสิ้นสุดคือวงกลมซึ่งแตกต่างจากความเข้าใจของฉัน
เริ่มต้นด้วยสิ่งที่ง่ายที่สุด ก่อนอื่นให้ทำเรเดียลเรเดียลที่เป็นประจำนั่นคือจุดศูนย์กลางของวงกลมการไล่ระดับสีคือจุดเริ่มต้นของการไล่ระดับสี เนื่องจากการไล่ระดับสีรัศมีปกติจุดศูนย์กลางเป็นศูนย์กลางของวงกลมเราควรพยายามหลีกเลี่ยงความเบ้ ดังนั้นให้ซ้อนทับศูนย์กลางของวงกลมปลายกับศูนย์กลางของวงกลมเริ่มต้น?
var radial = ctx.createradialgradient (55,55,10,55,55,55); // พิกัดศูนย์ที่เกี่ยวข้อง
radial.addcolorstop (0, '#fff');
radial.addColorStop (0.5, '#ff0');
Radial.addColorStop (0.9, '#555');
radial.addcolorstop (1, '#f00');
วงกลมจุดเริ่มต้นเรเดียลและพิกัดศูนย์กลางวงกลมที่ฉันตั้งไว้ที่นี่เหมือนกันในขณะที่รัศมีของวงกลมจุดเริ่มต้นคือ 10 และรัศมีของวงกลมจุดสิ้นสุดคือ 55 ช่วงการไล่ระดับสีเรเดียลสุดท้ายที่วาดคือวงกลมที่มีความกว้างและความสูง 110 แสดงว่าช่วงการไล่ระดับสีขึ้นอยู่กับช่วงของวงกลมจุดสิ้นสุด
(คุณจะเห็นว่ายังมีสีนอกช่วงวงกลมปลายและสีนี้เป็นสีสุดท้ายอย่างไรก็ตามถ้าคุณพยายามใช้ Radial.addColorStop (1.5, '#0F0') เพื่อกำหนดสีนอกช่วงการไล่ระดับสีคุณจะยังคงได้รับข้อผิดพลาด)
ดังนั้นการใช้รัศมีของวงกลมจุดเริ่มต้นคืออะไร? - ศูนย์กลางของการไล่ระดับสีรัศมีปกติ (เรียกมันว่าการเปลี่ยนแปลงของหัวใจ ... ) เป็นเพียงจุดหนึ่งไม่ใช่วงกลม จริงๆแล้วเราพูดถูก วงกลมจุดเริ่มต้นนี้เป็นเหมือนจุด แต่มันอาจจะค่อนข้างใหญ่
มาทำให้รัศมีของวงกลมเริ่มต้นมีขนาดใหญ่มากใกล้กับรัศมีของวงกลมปลาย:
var radial = ctx.createradialgradient (55,55,50,55,55,55); // ใกล้มาก
colorstops อื่น ๆ ยังคงไม่เปลี่ยนแปลงและจากนั้นกราฟิกจะกลายเป็นเช่นนี้
กล่าวอีกนัยหนึ่งสีเริ่มต้นของการไล่ระดับสีรัศมีในผืนผ้าใบถูกดึงออกมาจากด้านนอกช่วงของวงกลมเริ่มต้นและสีทั้งหมดของวงกลมเริ่มต้นคือสีเริ่มต้น
ให้เราตั้งรัศมีของวงกลมจุดเริ่มต้นเป็น 0 และการเปลี่ยนแปลงจุดศูนย์กลางเรเดียลเรเดียลเป็นจุดจริงๆ
ส่วนใหญ่เราไม่จำเป็นต้องมีการไล่ระดับสีรัศมีอย่างเป็นทางการ แต่หวังว่าการเปลี่ยนแปลงของหัวใจจะชดเชยคล้ายกับรูปด้านล่าง:
ในเวลานี้ข้อได้เปรียบของวงกลมทั้งสองของการไล่ระดับสีรัศมีของผืนผ้าใบออกมา ตราบใดที่กึ่งกลางของวงกลมจุดเริ่มต้นและวงกลมจุดสิ้นสุดไม่ทับซ้อนกันการเปลี่ยนแปลงของหัวใจก็จะเปลี่ยน:
var radial = ctx.createradialgradient (75,75,0,55,55,55); แต่ช่วงการไล่ระดับสีในเวลานี้ยังคงเป็นช่วงของวงกลมปลาย
หลายคนเกิดมาพร้อมกับความคิดของการทำลายล้าง ตัวอย่างเช่นที่นี่รัศมีของวงกลมปลายจะมีขนาดใหญ่กว่าวงกลมเริ่มต้นเสมอ แต่จะเกิดอะไรขึ้นถ้าพวกเขากลับด้าน?
var radial = ctx.createradialgradient (75,75,55,55,55,0);
หลังจากการทดสอบจะไม่มีข้อผิดพลาด แต่การไล่ระดับสีเดิมจากด้านในไปด้านนอกได้กลายเป็นการไล่ระดับสีจากด้านนอกไปด้านใน นี่เป็นวิธีที่ดีในการใช้งาน
มีปัญหาอื่น หากเราเลื่อนศูนย์กลางของวงกลมเริ่มต้นและช่วงของวงกลมเริ่มต้นเกินช่วงของวงกลมปลาย
จะเกิดอะไรขึ้นในเวลานี้?
อ่า - สถานการณ์คืออะไร? -
สถานการณ์นี้เกิดขึ้นเมื่อวงกลมเริ่มต้นและวงกลมสิ้นสุดจะทับซ้อนกันเพียงบางส่วนเท่านั้น ดังนั้นหากคุณต้องการการไล่ระดับสีรัศมีปกติตรวจสอบให้แน่ใจว่าหนึ่งในวงกลมจะล้อมรอบอีกวงกลมอย่างสมบูรณ์
นอกจากนี้เนื่องจากการไล่ระดับสีสามารถกำหนดให้กับ Fillstyle จึงสามารถกำหนดให้กับ Strokestyle ได้ คุณรู้ว่าเอฟเฟกต์