HTML5 Canvas Drawing Tutorial (4) - เส้นทางที่ไม่มีการเปิดและวิธีการเติมสีไล่ระดับสี

มีวิธีการวาดภาพทั่วไปสองวิธีคือเติมและจังหวะ บทความก่อนหน้านี้ได้พูดคุยเกี่ยวกับวิธีการของโรคหลอดเลือดสมองแล้ว บทความนี้จะพูดคุยเกี่ยวกับวิธีการเติมกราฟิกในผืนผ้าใบ

เติม () ตรงไปตรงมามาก? และเช่นเดียวกับ 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 สีลงในแถบการไล่ระดับสี

ในเวลานี้เราสามารถเติมสีไล่ระดับสีได้ แต่ก่อนอื่นเราต้องกำหนดไล่ระดับสีที่กำหนดให้กับ 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 ได้ คุณรู้ว่าเอฟเฟกต์